:not()
- 定义：:not 伪类：用于选择不满足给定条件的元素，也被称为反选伪类。
- 语法：
:not(selector)
- 示例：除了class为.two, .five，其他的li元素背景颜色变为红色
<html>
<head>
<style>
ul :not(.two, .five) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="one">111</li>
<li class="two">222</li>
<li class="three">333</li>
<li class="four">444</li>
<li class="five">555</li>
<li class="six">666</li>
</ul>
</body>
</html>
效果如下：
- 浏览器兼容性：
:has()
- 定义：:has 伪类：用于选择包含特定子元素的元素
- 语法：
:has(selector)
- 示例：选择ul里面包含.two或.four元素的ul元素
<html>
<head>
<style>
ul:has(.two, .four) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="one">111</li>
<li class="two">222</li>
</ul>
<ul>
<li class="three">333</li>
<li class="four">444</li>
</ul>
<ul>
<li class="five">555</li>
<li class="six">666</li>
</ul>
</body>
</html>
- 效果如下：
- 【注意】浏览器兼容性：
:is()
- 定义：:is 伪类：可以选择多个类名，而不需要编写多个选择器，从而简化了代码
- 语法：
:is(selector)
- 示例：选择 < ul > 元素下具有 .two、.four 或 .six 类的 < li > 元素，并将它们的背景颜色设置为红色
<html>
<head>
<style>
ul li:is(.two, .four, .six) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="one">111</li>
<li class="two">222</li>
<li class="three">333</li>
<li class="four">444</li>
<li class="five">555</li>
<li class="six">666</li>
</ul>
</body>
</html>
- 效果如下：
- 浏览器兼容性：
:where()
- 定义：:where 伪类：用于选择满足给定条件的元素（与 :is 伪类类似），并可以与其他选择器组合使用
- 语法：
:where(selector)
- 示例：选择 < ul > 元素下具有 .two、.four 或 .six 类的 < li > 元素，并将它们的背景颜色设置为红色
<html>
<head>
<style>
ul li:where(.two, .four, .six) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="one">111</li>
<li class="two">222</li>
<li class="three">333</li>
<li class="four">444</li>
<li class="five">555</li>
<li class="six">666</li>
</ul>
</body>
</html>
- 效果如下：
- 浏览器兼容性：
:where()与:is() 的区别
- :where() 伪类和 :is()伪类都是用于简化选择器的书写。它们都允许将多个选择器组合在一起，使用逗号分隔的选择器列表作为参数，以提供更简洁的选择器语法。
- 例如 :is(.class1, .class2, .class3)或者:where(.class1, .class2, .class3)。
- 语法差异如下：
- :is() 伪类在选择器的权重计算中起到作用，它会创建一个新的层级，在 CSS 规则中的权重计算中影响选择器的优先级，:is() 的优先级是由它的选择器列表中优先级最高的选择器决定。
- :where() 伪类不会创建新的层级，它只是作为语法上的辅助，提供更简洁的选择器语法，不会影响选择器的权重计算，:where() 的优先级总是为 0。
- 通过下面的代码示例来说明这两个伪类的区别：
<html>
<head>
<style>
ul li:is(.two, .four, .six) {
background-color: red;
}
ul li:where(.two, .four, .six) {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="one">111</li>
<li class="two">222</li>
<li class="three">333</li>
<li class="four">444</li>
<li class="five">555</li>
<li class="six">666</li>
</ul>
</body>
</html>
- 显示效果：
可以看到：
:where() 伪类中的background-color: yellow并未覆盖:is() 中的background-color: red，只有color: blue在生效，所以:where() 并未影响选择器的权重计算。
