文档章节

CSS优先级

我是偶哦
 我是偶哦
发布于 2016/06/03 21:37
字数 851
阅读 26
收藏 0

在网页设计中我们经常需要用CSS选择器选中元素并添加样式,但如果两个选择器选中同一个元素,到底哪个样式生效呢?曾经我以为后面的会覆盖前面的,但是事实并非如此简单。

css的优先级是用四个数字表示的(a,b,c,d),数字的大小就代表优先级的大小,a,b,c,d分别对应如下几条规则。

  • style样式,很少在标签内加入style属性,所以一般为0,如果有则为1
  • css选择器中包含id数量的总和
  • 其他css选择器的总和
  • 标签和伪元素和伪类和总和

如果两个css选择器具有相同的优先级,则在样式表中后面的那个起作用。通配符的优先级为0。

例如

#leftbar li:first-child   的优先级为 0,1,0,2

h2.title                       的优先级为0,0,1,1

简单解释,我们可以看如下几个例子:

a>b(1000>0100)(style>id所以红色)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #id3{
            color:yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3" style="color: red">red</div>
    </div>
</div>
</body>
</html>

b>c (0100>0040) [id="id3"]属于属性选择器,不能包含在id选择器中,再加行三个类选择,共计4个。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #id3{
            color: red;;
        }
        .class1>.class2>.class3[id="id3"]{
            color:yellow;
        }


    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

 b>b(0030>0010)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .class1>.class2>.class3{
            color:red;
        }
        .class3{
            color: yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

c>d(0020>0012)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .class2>.class3{
           color:red;
       }
        div .class2:first-child{
            color: yellow;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">red</div>
    </div>
</div>
</body>
</html>

现在大家应该对CSS优先级规则有了最直观认识,但是上面并不包括!important,!important是用来强制覆盖样式的,并不关心优先级,被!important覆盖的元素默认有最高优先级,但有一个元素被两个!important覆盖,则还是按照CSS优先级确定规则。

for example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .class2>.class3[id="id3"]{
           color:red ;
       }
        div .class2>.class3{
            color: yellow !important;
        }

    </style>
</head>
<body>
<div id ="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">yellow</div>
    </div>
</div>
</body>
</html>

值得一提的是使用!important时注意伪类。

研究这个时,顺便看了一下伪类和伪元素的区别:

CSS伪类用于向某些选择器添加特殊效果

CSS伪元素用于将特殊的效果添加到某些选择器

例如:

:hover 当鼠标悬停元素上方时,向元素添加样式

:before 在某元素之前插入某些内容

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上CSS3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。:before-->::before

本文参考如下链接,如想更一步了解,自行阅读

CSS伪类和伪元素的区别:https://segmentfault.com/a/1190000000484493

© 著作权归作者所有

我是偶哦
粉丝 6
博文 32
码字总数 21607
作品 0
深圳
私信 提问

暂无文章

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
788
11
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
15
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部