CSS整洁之道中的 :is(), :where() 和 :has() 是三个强大的伪类选择器，它们为我们提供了更灵活、更简洁的方式来选择元素。下面我将分别介绍这三个选择器的用法和它们如何帮助我们实现CSS的整洁之道。
首先，:is() 伪类选择器允许我们为多个选择器指定相同的样式。这在需要为多个具有相似样式的元素设置相同的CSS规则时非常有用。:is() 的语法允许我们将多个选择器用逗号分隔，然后为它们统一设置样式。这使得我们的CSS代码更加简洁和易于维护。
例如，假设我们想要为页面上的所有 h1、h2 和 h3 元素设置相同的字体和颜色，我们可以这样写：
:is(h1, h2, h3) {
font-family: Arial, sans-serif;
color: #333;
}
接下来，:where() 伪类选择器与 :is() 类似，但它在选择元素的优先级上有所不同。:where() 选择的元素在特异性计算中不会增加权重，这使得它特别适用于需要避免样式优先级冲突的情况。当你不希望增加选择器的特异性时，使用 :where() 可以帮助你保持样式的整洁和可预测性。
例如，使用 :where() 来选择并设置所有段落文本的样式：
:where(p) {
font-size: 1rem;
line-height: 1.5;
}
最后，:has() 伪类选择器允许我们根据元素的子元素来选择元素。这是一个非常强大的功能，因为它允许我们基于子元素的存在或状态来设置父元素的样式。这使得我们能够创建更加复杂和响应式的布局。
例如，我们可以使用 :has() 来选择包含特定类名的元素的父元素，并为其设置样式：
div:has(.highlight) {
border: 1px solid yellow;
}
在上面的例子中，任何包含 .highlight 类名的 div 元素都会被添加一个黄色边框。
通过使用 :is(), :where() 和 :has() 这三个伪类选择器，我们可以更加简洁、高效地编写CSS代码，实现样式的整洁和可维护性。它们提供了更多的灵活性和控制力，使我们能够更精确地选择元素并应用样式规则。
