YeungYeah 的乱写地

CSS 选择器

 Posts  

翻 MDN 文档重新系统地学习下 CSS 选择器知识，记录下来当作笔记。

所谓 CSS selector 用于在 HTML 文档中选取指定的元素节点，可用于 CSS 文件中设置 style 或者在某些库中选取元素节点（如爬虫）。

CSS Rules 中使用

在 CSS 文件中 selector 通常为 Rules 的开头，每个 Rules 可以指定单个 selector 或者指定 selectors list，后者以逗号分割 (,)

CSS 选择器类型

  • Type selectors: 类型选择器，根据 tagname 来选择对应的元素
  • Universal selectors: 通用选择器，使用 * 来匹配所有元素
    • 可以增强伪类选择器的可读性： div *:first-child instead of div :first-child
  • Class selectors: 类选择器，使用 .classname 来选择相应的元素
    • 可以结合其它选择器如 span.highlight
    • 可以同时选取包含多个 class 的元素 .class1.class2
  • ID selectors: ID 选择器，使用 #id 来选取相应元素
  • Attribute selectors: 属性选择器，根据元素的属性来选择元素
    • [attr]: 元素包括 attr 属性
    • [attr='val'] : 元素的 attr 属性值为 val
    • [attr~='val'] : 元素的 attr 属性为 val 或该属性的列表中包含 val（如 attr='val val1'
    • [attr|='val'] : 元素的 attr 属性为 val 或该属性以 val- 开头（如 attr='val-val1'
    • [attr^='val'] : 属性以 val 开头
    • [attr$='val'] : 属性以 val 结尾
    • [attr*='val'] : 属性包含 val
    • 取否定需要伪类选择器 :not([attr])
    • 末尾添加 i 可以是匹配大小写不敏感
  • pseudo-class: 伪类选择器，用 :pseudo-class-name 可选择在特定状态的元素
    • 选择指定顺序: first-child, last-child, first-of-type, nth-child(n or an+b)
    • 选择特定状态: checked, disabled, visited
    • for action: hover, focus
  • pseudo-element: 伪元素选择器，使用 ::pseudo-element 选取
    • 与伪类的区别伪元素会为选中的元素添加 HTML 片段，而伪类只会在原元素中修改
    • 选取特定位置: first-line
    • 生成特定内容: before, after 然后通过 content 属性设置

CSS Combinators

  • Descendant: 后者元素的某个祖先是前者元素
  • Child: > 后者是前者的直接子节点
  • Adjacent sibling: + 后者紧接着前者，且是同一个父元素节点
  • General sibling: ~ 后者出现在前者的后面，且是同一个父元素节点

CSS Selector 的优先级

如果有多个 CSS Rule 同样选择到了某个元素节点且声明的 CSS 样式出现冲突时，会根据首先根据优先级进行处理，当优先级相同时，选择后声明的规则。

优先级可以用一个四位数表示，每出现一个选择器在相应位上加一

  1. inline style: 行内的 css style 的优先级时最高的，直接在千位加一
  2. 百位: ID Selector
  3. 十位: Class selector, attribute selector, preudo-class selector
  4. 个位: type selector, preudo-element selector

相关文章：