CSS第四级选择器有哪些，它们是如何使用的？

2023-10-10 20:49:39

CSS 是网页的骨架，而选择器则是它的灵魂。借助选择器，我们可以精确定位到网页中的某个元素，并对其进行各种操作。

CSS选择器有多种类型，它们各有不同的语法和作用。在 CSS 的第四级规范中，新增了一些新的选择器，这些选择器更加强大和灵活，能够帮助我们更精细地控制网页的样式。

CSS 第四级选择器

CSS 第四级选择器主要包括以下几种：

:where() 选择器：
“:where()”选择器允许我们根据一个元素是否满足某个条件来对其进行选择。例如，我们可以使用以下选择器来选择所有满足条件的元素：
```
:where(:hover) {
  color: red;
}
```
:has() 选择器：
“:has()”选择器允许我们选择所有包含子元素的元素。例如，我们可以使用以下选择器来选择所有包含段落元素的 div 元素：
```
div:has(p) {
  background-color: yellow;
}
```
:is() 选择器：
“:is()”选择器允许我们选择所有属于指定类型的所有元素。例如，我们可以使用以下选择器来选择所有段落元素和标题元素：
```
p, h1, h2, h3, h4, h5, h6 {
  color: blue;
}
```
:not() 选择器：
“:not()”选择器允许我们选择所有不属于指定类型的所有元素。例如，我们可以使用以下选择器来选择所有不属于段落元素的所有元素：
```
:not(p) {
  color: green;
}
```
::part() 选择器：
“::part()”选择器允许我们选择元素的特定部分。例如，我们可以使用以下选择器来选择所有输入框的提交按钮：
```
input::part(submit-button) {
  background-color: red;
}
```