CSS | 胡子

什么是 CSS | 胡子？

CSS | 胡子（CSS Selectors 派生语法，CSS Selectors Level 4） 是CSS选择器的扩展，允许开发人员根据元素位置或其它条件选择元素。CSS | 胡子旨在简化CSS选择器的书写和使用，使代码更加简洁和易于维护。

CSS选择器与 CSS | 胡子

CSS选择器是用来选择指定元素的方法，例如通过标签名、类名、ID来选择元素。而 CSS | 胡子 基于 CSS选择器，扩展了一些新的选择器方法来更加精细地选择元素。

以下为一些常见的CSS选择器：

• 标签选择器 div，选择所有的 <div> 元素。
• 类选择器 .class，选择所有带有指定 class 属性的元素。
• ID选择器 #id，选择所有带有指定 id 属性的元素。
• 后代选择器 A B，选择所有符合 B 元素且是 A 元素的后代元素。

而 CSS | 胡子 添加了以下新的选择器：

:has() 伪类选择器

:has() 伪类选择器选择符合指定条件的父元素，条件由括号中的选择器定义。

例如，以下代码将选择所有包含有一个 span 子元素的 div 元素：

div:has(span) {
  background-color: yellow;
}

:not() 伪类选择器

:not() 伪类选择器选择不符合指定条件的元素，条件由括号中的选择器定义。

例如，以下代码将选择除了所有的 p 元素之外的元素：

:not(p) {
  color: red;
}

:nth-child() 伪类选择器

:nth-child() 伪类选择器选择符合指定条件的父元素下的第 n 个子元素，条件由括号中的表达式或关键字定义。

例如，以下代码将给每个列表元素的第一个子元素添加一个背景颜色：

li:nth-child(1) {
  background-color: yellow;
}

:nth-last-child() 伪类选择器

与 :nth-child() 伪类选择器类似，但是它是从父元素的尾部开始计算子元素的位置，再根据位置选择元素。

例如，以下代码将给每个列表元素的倒数第二个子元素添加一个背景颜色：

li:nth-last-child(2) {
  background-color: yellow;
}

总结

CSS | 胡子 是CSS选择器的扩展，它简化了CSS选择器的书写和使用，使得开发人员可以更加精细地选择元素。它包括许多新的选择器方法，如 :has()、:not()、:nth-child() 和 :nth-last-child() 等。这些新的选择器方法帮助开发人员更加灵活地设置样式，使得代码更加易于维护。