Shymean

Appearance

选择器 ​

参考之前的整理：

选择器类型 ​

选择器指定浏览器对不同的选择器应用不同的样式规则

  • 语义选择器
    • 元素
      • 标签选择器
      • 伪元素选择器，:after、:before
      • 通配选择器，*
    • 类
      • 类选择器
      • 伪类选择器，:link,:visited,:hover,:active
    • ID 选择器
  • 属性选择器
    • 简单属性，如a[title]
    • 简单属性，如a[href="http:www.google.com"]
    • 部分属性，部分属性选择器类似于正则语法，通过属性值的某部分来筛选元素
  • 结构选择器
    • 分组选择器，多个选择器之间使用,进行分隔
    • 多类选择器，限定只有同时包含这些类名的元素（与类名顺序无关）才能应用对应的声明规则
  • 后代选择器
    • 空格结合符，包含所有后代子元素
    • 子结合符，>
    • 相邻兄弟结合符，+

此外还可以了解 CSS3 新增的一些选择器，如:not、nth-of-type等

伪类和伪元素有什么区别?

  • 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
  • 伪元素本质上是创建了一个有内容的虚拟容器；

css3中规定使用::表示伪元素如::after，:表示伪类如:hover，但实际上两种写法都是兼容的

::after和::before的content属性，除了支持文本值外，还可以使用标签的一些属性值，包括自定义属性值，使用方法是attr(href)或者attr(data-*)，用来动态的设定伪类的内容，最常用的地方比如热点排行，消息数量气泡等。

匹配规则 ​

选择器是从右向左进行匹配节点

样式继承和权重值 ​

参考之前的整理:

如果有多条规则应用在同一元素上，则使用层叠解决

继承

子元素可以从父元素继承属性，样式继承机制是基于元素的，因此不同的元素可继承的样式可能不同，此外也包含一些通用的可继承与不可继承的属性

权重值计算 样式表中权重值 ABCD 的比较:

  • 如果是内联样式，千位+1；
  • 如果有 id 选择器，百位+1；
  • 如果有类、伪类或者属性选择器，十位+1；
  • 如果有标签名或伪元素选择器，个位+1；

最后依次比较对应位置上的数字大小，需要注意的是并不会十进制进位（不是单纯的比较最后总数大小，虽然书上是这么说的，但是貌似不是完全正确。），也就是说 0，0，1，0 与 0，0，0，11 比较的话，前者的权重值仍然比后面高（但是一般应该没有连续嵌套 11 个标签名的做法吧，大概会被打死的...）

  • 对于!important，其权重值非常高，当纯在多个important时，将在这些多个important的属性中按照上述计算公式计算比较
  • 当多个规则应用在同一个元素上时，权重越高的样式将被优先采用
  • 当权重值相同的时候，在样式表中后定义的样式将覆盖先前定义的样式

注意

需要理解的是，继承而来的属性值权重值是非常低的，权重值永远低于明确指定到元素的定义，甚至低于通配符。

只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值，也就是说可以使用一个更“具体的”选择符属性覆盖继承自祖先的属性而忽略权重值的问题。

html
<style>
    #r { color：red }
    span { color:blue }
</style>

<p id="r"><span> hello</span></p>

尽管前者的权重值远大于后者，但是 span 里面的字体颜色仍然是蓝色。

顺序选择器 ​

顺序选择器nth-of-type(an+b)和 nth-child(an+b)等计算规则

nth-child ​

参考MDN 文档

首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值。

简单点说就是，这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素，其索引从 1 开始·

需要注意a为负数的情况，如nth-child(-n+3)表示匹配前三个元素，看下面的代码

css
div span:nth-child(-n+2){
    /* 根据规则，先找到所有的兄弟节点，然后n从0开始+1递增，找到 0 < 表达式 && 表达式 <= 兄弟节点长度的值 > */
    /* 因此此处 索引值为2,1的元素满足条件 */
    background-color: blue;
}
div span:nth-child(-2n+2){
    /* 此处只有 n=0时 索引值为2的元素满足条件，当n为1时，获取的索引值为0，不再参与匹配 */
    background-color: red;
}

nth-of-type ​

参考MDN 文档

与nth-child匹配原理基本相同，区别在于只有类型相同参与索引值排序和计算

这个 CSS 伪类 匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。

匹配同类型的兄弟元素中对应索引的元素，索引从 1 开始

nth-last-child ​

参考MDN 文档

从兄弟节点中从后往前匹配处于某些位置的元素，其他规则与nth-child基本一致。

需要注意:nth-last-child(n) 与 :nth-last-child(n+1)均表示匹配的是每一个节点，这同样是因为表达式的有效值是从1开始计算的

nth-last-of-type ​

同上