7个高效的CSS选择器用法示例 让代码量减少70%

CSS选择器在前端开发中的作用至关重要，它直接决定了如何选择和样式化HTML元素。随着CSS的发展，尤其是新的CSS选择器的引入，开发者能够更高效地写出更简洁的代码，减少冗余，提升可维护性。下面是一些可以帮助减少代码量、提高效率的新一代CSS选择器：

1. :is() 和 :where()

:is() 和 :where() 选择器是两个非常强大的CSS功能，它们允许你对多个选择器进行分组，从而减少重复的代码。

:is()：它允许你选择匹配指定多个选择器中的任何一个的元素。使用它时，可以提高代码的可读性并减少重复。例如：

/* 不使用 :is() */
.btn-primary, .btn-secondary, .btn-tertiary {
  background-color: blue;
  color: white;
}

/* 使用 :is() */
.btn:is(.primary, .secondary, .tertiary) {
  background-color: blue;
  color: white;
}

:is() 可以有效地减少重复的选择器，使代码更加简洁。

:where()：与 :is() 类似，但它具有更低的特异性。where() 选择器不会增加选择器的特异性，因此可以避免意外覆盖其他规则。示例：

/* 不使用 :where() */
.btn-primary, .btn-secondary, .btn-tertiary {
  background-color: green;
}

/* 使用 :where() */
:where(.btn-primary, .btn-secondary, .btn-tertiary) {
  background-color: green;
}

2. :not()

:not() 选择器使你能够排除特定的元素，避免不必要的复杂选择器。例如，选择所有的按钮，但不包括某些类型的按钮：

/* 选择所有按钮，排除 .disabled 按钮 */
button:not(.disabled) {
  background-color: green;
}

:not() 可以帮助减少代码量，避免使用多个选择器组合，提升可维护性。

3. :has() (父选择器)

这是一个相对较新的选择器，允许你选择包含某些子元素的父元素。has() 可以根据子元素的存在来选择父元素，极大简化了很多基于父元素的选择规则：

/* 选择包含 .active 子元素的 .menu 项 */
.menu:has(.active) {
  background-color: yellow;
}

这种选择器可以简化许多原本需要JavaScript来实现的功能。

4. :nth-child() 和 :nth-of-type() 优化

这两个伪类选择器用于选择元素的某些“位置”。可以在一些复杂布局中，减少不必要的类名使用。

:nth-child() 选择同类型的元素中位置为指定数字或公式的元素。

/* 选择每个父元素下的第二个子元素 */
div:nth-child(2) {
  color: red;
}

:nth-of-type() 与 :nth-child() 类似，但是它只选择同一类型的元素，而不是所有类型的子元素。

/* 选择每个父元素下的第二个p元素 */
div p:nth-of-type(2) {
  color: blue;
}

5. :focus-visible

这是一个专门用于访问性优化的伪类选择器。它仅在用户使用键盘等方式进行焦点操作时，应用样式。它能够帮助减少不必要的焦点样式。

/* 只有当用户使用键盘焦点时，才会显示边框 */
button:focus-visible {
  outline: 2px solid blue;
}

6. @layer (CSS层)

@layer 是 CSS 的一个新功能，可以帮助我们更好地组织样式表，避免 CSS 优先级冲突，减少选择器的复杂度。通过 @layer 可以将样式组织成不同的“层级”，这样可以确保样式按照一定顺序应用：

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer typography {
  body {
    font-family: Arial, sans-serif;
  }
}

@layer utilities {
  .hidden {
    display: none;
  }
}

使用 @layer 可以减少样式文件中的冗余代码，并提高样式表的可读性。

7. @supports (CSS特性查询)

@supports 允许你根据浏览器是否支持某个CSS特性来应用不同的样式，这样可以避免冗余的条件判断和使用JavaScript：

/* 如果浏览器支持 grid 布局 */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

/* 如果不支持 grid 布局 */
@supports not (display: grid) {
  .container {
    display: flex;
  }
}

通过结合这些新选择器，你可以编写更简洁、功能更强大且易于维护的CSS，减少冗余代码，提升开发效率。你有没有在实际项目中用过这些新选择器，或者是对某一个特别感兴趣，想深入了解？