谈起 CSS 选择器你容易忽视的点

2017-03-01 本文已影响0人 anshi

伪类选择器

除去众所周知的类选择器和 ID 选择器外，还有相对接触不那么频繁的伪类选择器和伪元素选择器。而提起伪类选择器，大家可能首先想到 :hover/visited/active/focus 四种状态伪类，便没了下文，实际上伪类选择器是个大家族，这里有一份标准伪类列表。

标准伪类索引

基于关系的选择器

关系选择器比较容易令人忽视的就是 A E / A>E 的区别了，前者是匹配了A的所有后代元素E，而后者匹配的是 A 的所有直系后代元素 E。
第二个容易令人混淆的就是 B + E 和 B ~ E，二者都针对的兄弟元素(不包括自己)。请看如下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text2 + span {
            color: blue;
        }
        .text4 ~ span {
            color: red;
        }
    </style>
</head>
<body>
<div class="warp" id="wrap">
    <span class="text1">1</span>
    <span class="text2">2</span>
    <span class="text3">3</span>
    <span class="text4">4</span>
    <span class="text5">5</span>
    <span class="text6">6</span>
</div>
</body>
</html>。

最终结果:

对 + 而言，匹配的是——指定元素（.text2 选择的元素)的下一个，能匹配 span 选择器的兄弟元素。(也就是说下一个兄弟元素不是 p 标签，那匹配规则是不生效的。)
而 ~ 则匹配的是——指定元素（.text4 匹配的元素）后的(所有)，能匹配 span 选择器的兄弟元素。
说白了就是后一个和后多个的问题，二者都是对兄弟元素声明规则，但不是对自己声明规则。

优先级计算

之前一直含糊的认为，优先级是个数值，数值越大优先级越高，其中一个id选择器赋值1000，类选择器赋值100，标签选择器赋值1，含糊的累加计算来确定优先级。

CSS3中选择器的优先级如下计算：

获取选择器中ID选择器的个数，赋值给a
获取选择器中类选择器，属性选择器([type="text"])和伪类选择器(:hover)的个数，赋值给b
获取选择器中标签(type)选择器和伪元素选择器(::before)的个数，赋值给c
通用选择器(*)不占优先级权重

将abc三个数串联成一个基数绝对大的数字(既无论数字再大也不进位)。

#btn.red      //a=1,b=1,c=0      =>specificity =   110  
.big li       //a=0,b=1,c=1      =>specificity =   11
ul li         //a=0,b=0,c=2      =>specificity =   2

如果两个specificity值一样呢？那自然是看样式表中出现的先后顺序，后者可以覆盖前者的样式。

给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级（不包括!important）。

!important除外

当在一个样式声明上使用 !important 规则(虽然不鼓励用)时，该样式声明会覆盖CSS中任何其他的声明(包括内联样式)。
想要覆盖 !important 只能再增加一条带 !important 的 CSS 规则。

基于声明形式的优先级

<style>
 //二者都是以 id 属性做为辨识信息的选择器，但是前者以 id 选择器的形式，后者以属性的形式声明
 #id{ color: "red";}
 [id="milk"]{ color: "green"}
</style>
<div id="milk">牛奶</div>

最终这个div的color仍然是 red，因为 [id="milk"]是以属性选择器来添加权重的。

容易令人误解的点

如下例子:
@question 这里两个选择器，前者对应的优先级值假设是 0/0/2 后者不应该是 0/1/1 吗，按理后者优先级更高，但是实际 span 标签的颜色是红色的。

       div span{
           color:red;
       }
        div:first-child{
            color:blue;
        }

这是为什么呢？

实际上当你在确定一个元素的样式表时，首先要考虑的并不是优先级；只有当同一个元素，有多个样式声明时，这时候考虑优先级才有意义。

请看如下例子:

    <style>
        #wrap {
            color: red;
        }
        span {
            color: blue
        }
    </style>

...

<body>
<div class="warp" id="wrap">
    <span class="text1">233</span>
    <span class="text3">text3</span>
    <p>
        <span class="text2">466</span>
    </p>
</div>

这里的 span 元素的 color 会是什么颜色呢？
最终都是蓝色。

这里的 color: red; 是属于继承而来的颜色，在 CSS 规则中直接作用于元素的样式声明总是会覆盖从祖先元素继承而来的规则。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。来自MDN

参考阅读：