让前端飞

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

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

伪类选择器

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

标准伪类索引

基于关系的选择器

基于关系的选择器
<!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>。

最终结果:


优先级计算

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

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

将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

参考阅读:

上一篇 下一篇

猜你喜欢

热点阅读