CSS :where，:is，:has伪类选择器

CSS中的:where, :is, 和 :has伪类选择器是相对较新的特性，它们允许你以更灵活的方式编写选择器。

• :where(selector): 可以将它看作是一个逻辑组，它将匹配所有满足参数中给出的选择器的元素。
• :is(selector): 它是一个用来匹配多个选择器的方式，类似于其他语言中的“或”操作。
• :has(selector): 它用来选择包含特定子元素的元素。

以下是这些伪类选择器的简单示例：

/* :where 示例 */
:where(h1, h2, h3) {
  color: blue;
}
 
/* 上述代码等同于下面的代码，但是 :where 更灵活和可读性更好 */
h1, h2, h3 {
  color: blue;
}
 
/* :is 示例 */
div:is(.box, .container) {
  border: 1px solid black;
}
 
/* 上述代码等同于下面的代码，但是 :is 更适合处理“或”条件 */
.box, .container {
  border: 1px solid black;
}
 
/* :has 示例 */
div:has(p) {
  background-color: yellow;
}
 
/* 上述代码会选择包含 <p> 元素的 <div> 元素，并给它们设置背景色 */

需要注意的是，这些伪类选择器可能在旧版浏览器中不被支持，因此在使用时需要考虑浏览器兼容性问题。