《重学前端》学习笔记Day117

CSS选择器机制

选择器组合

在CSS规则中，选择器部分是一个选择器列表。
选择器列表是用逗号分隔的复杂选择器序列；复杂选择器是用空格，大于号，波浪号等符号连接的复合选择器。复合选择器则是连写的简单选择器组合。
根据选择器列表的语法，选择器的连接方式可以理解为四则运算一起有优先级。

• 第一优先级

  • 无符号

• 第二优先级

  • "空格". "+", "~", ">", "||"

• 第三优先级

  • ","

  复合选择器表示简单选择器的"且"的关系。
  复杂选择器是针对节点关系的选择，它规定了五种连接符号： 
   "空格"：后代，表示选中所有符合条件的后代节点  
  ">": 子代，  
  "~": 后继  
  "+"： 直接后继  
  "||": 列选择器，表示选中对应列中的符合条件的单元格

  选择器优先级

  CSS标准用一个三元组(a,b,c)来构成一个复杂选择器的优先级。
  id选择器的数目记为a;
  伪类选择器和class选择器的数目记为b;
  伪元素选择器和标签选择器数目记为c；
  "*"不影响优先级。
  CSS标准建议用一个足够大的进制，获取"a-b-c"来表示选择器的优先级。即：

  specificity = base * base * a + base * b + c

行内属性的优先级永远高于CSS规则, !import优先级高于行内属性。
同一优先级的选择器遵循“后面的覆盖前面的”原则。

伪元素

目前兼容性达到可用的伪元素有以下几种。
::first-line
::first-letter
::before
::after:first-line和::first-letter比较类似，其中一个表示元素的第一行，一个表示元素的第一个字母。

::before 和 ::after 伪元素
::before 表示在元素内容之前插入一个虚拟的元素，::after 则表示在元素内容之后插入。
这两个伪元素所在的CSS规则必须指定content属性才会生效。

此文章为7月Day20学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪