摘要 今天小编跟大家讲解下有关CSS选择器及优先级 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS选择器及优先级 的相关资料

今天小编跟大家讲解下有关CSS选择器及优先级 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS选择器及优先级 的相关资料，希望小伙伴们看了有所帮助。

选择器分类

id选择器

<div id="wrap"></div>#wrap{ background: black; }

类选择器

<div class="wrap"></div>.wrap{ background: black; }

标签选择器

div{ margin:0;}

属性选择器

<input type="text">[type=text] { background: black;}

伪类选择器

a元素的伪类：link、visited、active、hover。其他(1) li:first-child{} (修饰第一个li)(2) li:last-child{} (修饰最后一个li)(3) li:nth-child{} (修饰第()个li)(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)<ul> <li></li> <li></li> <li><a href="http://www.aidi.net.cn/article/detial/7799/"></a></li></ul>li:first-child { border:1px solid black;}li:last-child { border:1px solid red;}li:nth-child(2){ border:1px solid yellow;}

伪元素选择器

p::first-line { color: blue; text-transform: uppercase;}

群选择器以 分隔(逗号分隔开需要修饰的模块名)

<div> <p><span></span></p> <p></p></div>.qun,span { margin:0;}

全局选择器以*开头(星号标在大括号前 修饰了包含body所有的标签)

* { margin:0;}

紧邻兄弟选择器（相邻选择器）以+隔开相邻关系的元素 即第二个节点紧邻着第一个节点 并且拥有共同的父节点。

<div class="qun"> <p class="first"> <span>第一</span> </p> <p>第二</p> /*修饰*/ <p>第三</p></div>.first+p{ margin:0;}

一般兄弟选择器以~隔开兄弟关系的元素 第二个节点在第一个节点后面的任意位置 并且这俩节点的父节点相同。

<div> <p> <span>第一</span> </p> <p>第二</p> /*修饰*/ <p>第三</p> /*修饰*/</div>.first~p{ margin:0;}

子元素选择器以>隔开父子级元素 子选择器只是选择元素的直接后代 即仅仅作用于第一个后代。

<div> <p> <span>第一</span> </p> <p>第二</p> <p>第三</p> <span>第四</span> /*修饰*/</div>.qun > span { color:black;}

后代选择器以空格隔开包含关系的元素 选择元素的所有后代

<div> <p> <span>第一</span> /*修饰*/ </p> <p>第二</p> <p>第三</p> <span>第四</span> /*修饰*/</div>.qun span { color:black;}优先级的计算规则!important > 内联 > ID选择器 > 类选择器 > 标签选择器。

优先级是由A、B、C、D的值来决定的 其中它们的值计算规则如下：

如果存在内联样式 那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;C的值等于类选择器和属性选择器和伪类出现的总次数;D的值等于标签选择器和伪元素出现的总次数 。

例子：

#nav-global>ul>li>a.nav-link

套用上面的算法 依次求出ABCD的值：

因为没有内联样式 所以A = 0;ID选择器总共出现了1次 B = 1;类选择器出现了1次 属性选择器出现了0次 伪类选择器出现0次 所以C = (1 + 0 + 0) = 1；标签选择器出现了3次 伪元素出现了0次 所以D = (3 + 0) = 3;

上面算出的A、B、C、D可以简记作：(0, 1, 1, 3)。比较规则是: 从左往右依次进行比较 较大者胜出 如果相等 则继续往右移动一位进行比较 。如果4位全部相等 则后面的会覆盖前面的

来源：爱蒂网