css 选择器机制
选择器的组合
在 css 规则中，选择器部分就是一个选择器列表。 1. 选择器列表是由逗号分隔的复杂选择器序列 2. 复杂选择器是由空格、大于号、波浪线等符号连接的复合选择器。 3. 复合选择器则是连写的简单选择器组合。
不同连接方式的优先级
- 第一优先级
- 无连接符号
- 第二优先级
- "空格"
- "~"
- ">"
- "+"
- "||"
- 第三优先级
- ","
复杂选择器的连接符号
- 空格： 后代
>字典~后继节点，和当前节点具有同一个父元素，并出现在它之后。+直接后继节点||列选择器，表示选中对应列中符合条件的单元格。
空格和子代选择器使用场景
常用于组件化的场景，当组件是独立开发时，给组件的最外层容器元素设置一个特别的 class 命名，生成 css 规则则全部使用后代或者子代选择器，可以有效避免 css 规则的命名污染问题。
逗号 使用场景
表示“或”的关系，在有两条内容一样的 css 规则时使用，以简化代码。
选择器的优先级
css 规则用一个三元组 (a,b,c) 来构成一个复杂选择器的优先级
- id 选择器的数目为 a
- 伪类和 class 选择器的数目为 b
- 伪元素和标签选择器数目为 c
*不影响优先级
计算优先级
base是一个足够大的正整数 t
specificity = base * base * a + base * b + c
优先级规则
- 行内属性优先级永远高于 css 规则
!important相当于一个新的优先级，且高于行内属性- 同一优先级遵循“后面覆盖前面”的原则。
使用建议
- 建议“根据 id 选单个元素”
- "class 和 class 的组合选 成组元素"
- “tag 元素确定页面风格”
- 不要搞出过于复杂的选择器
伪元素
兼容性达到可用的伪元素
::first-line表示元素的第一行::first-letter第一个字母::before::after
::first-line和::first-letter
::first-line必须出现在最内层的块级元素内。::first-letter位置在所有标签之内
CSS 标准要求上述两个伪元素实现的 css 属性
::before 和::after
这两个元素是真正的无中生有，造出一个元素。，必须制定content属性才能生效。还能够支持content为counter.
::before表示在元素内容之前插入一个虚拟的元素::after表示 在元素内容之后插入一个虚拟元素
支持的 css 属性
::before和::after中支持所有的 css 属性。
用途
可以用作装饰性的元素，使用纯粹的 css 代码添加进去
