Css ：具有vs:matches-选择器级别4_Css_Css Selectors

Css ：具有vs:matches-选择器级别4

css

Css ：具有vs:matches-选择器级别4,css,css-selectors,Css,Css Selectors,只是想知道CSS（选择器4）伪选择器：has和：matches 说明书上说： E：匹配（s1，s2）与复合选择器s1和/或复合选择器s2匹配的E元素 §4.2匹配任何伪类：：匹配（） E:has（rs1，rs2）当使用E作为：scope元素进行计算时，如果相对选择器rs1或rs2中的任何一个，则E元素与元素匹配 §4.4关系伪类：：has（）简言之： E:has（rs1，rs2）在不同的元素F匹配与E相关的任何选择器参数时匹配E。如果您知道jQuery，这是完全相同的 E:matches

只是想知道CSS（选择器4）伪选择器

：has

和

：matches

说明书上说：

E：匹配（s1，s2）
与复合选择器s1和/或复合选择器s2匹配的E元素
§4.2匹配任何伪类：：匹配（）

E:has（rs1，rs2）
当使用E作为：scope元素进行计算时，如果相对选择器rs1或rs2中的任何一个，则E元素与元素匹配
§4.4关系伪类：：has（）

简言之：

```
E:has（rs1，rs2）
```
在不同的元素F匹配与E相关的任何选择器参数时匹配E。如果您知道jQuery，这是完全相同的
```
E:matches（s1，s2）
```
在E本身匹配任何选择器参数时匹配E。将
```
：matches（）
```
视为
```
：not（）
```
的正对面，如果E本身与任何参数都不匹配，那么它将与E匹配。1您还可以将
```
：matches（）
```
视为jQuery的伪类版本
这种表示法相当于将每个选择器参数与E连接起来（前提是您可以实际连接它们），这样您就有了一个选择器列表
```
（E）（s1）、（E）（s2）
```
。例如，
```
div:matches（.foo，.bar）
```
相当于
```
div.foo，div.bar
```

这一基本区别在选择器

div:matches（p）

和

div:has（p）

中得到了最直接的证明：

```
div:has（p）
```
匹配任何具有
```
p
```
子代的
```
div
```
元素。这与
```
divp
```
非常相似，只是前者的目标是
```
div
```
后者的目标是
```
p
```
由于
```
div
```
永远不能是
```
p
```
，
```
div:matches（p）
```
永远不会匹配任何东西（同样，
```
div:not（p）
```
将匹配所有
```
div
```
元素。）

下面是一个更复杂的示例，其中选择符的荒谬程度略低：

div:has(.foo, .bar)
div:matches(.foo, .bar)

使用以下标记：

<div class="foo"></div> <!-- [1] -->
<div class="bar"></div> <!-- [1] -->

<div class="foo bar">   <!-- [2] -->
  <p></p>
</div>

<div>                   <!-- [3] -->
  <p class="foo"></p>
</div>

<div>                   <!-- [3] -->
  <div>                 <!-- [3] -->
    <p class="bar"></p>
  </div>
</div>

<div>                   <!-- [4] -->
  <div class="foo">     <!-- [5] -->
    <p class="bar"></p>
  </div>
</div>

哪些元素与哪些选择器匹配

匹配者
div:matches（.foo，.bar）

第一个
div
元素具有“foo”类，第二个
div
元素具有“bar”类，因此每个元素都满足
：matches（）伪类中各自的选择器参数

匹配者div:matches（.foo，.bar）第三个div 元素具有两个类，因此它匹配两个选择器参数关于专一性的注意事项：这两个参数都具有相同的专一性，使得总专一性（0，1，1），但是当一个元素匹配具有不同专一性值的多个选择器参数时，规范会这样说匹配的div:has（.foo，.bar）每个div 元素都有一个子元素（在本例中是p ），其类与：has（）伪类中相应的选择器参数相匹配匹配的div:has（.foo，.bar）这个div 元素有一个div.foo 子体和一个p.bar 子体，因此它满足两个相对选择器参数关于专一性的注意事项：因为：has（）尚未在中，因此暂时排除在CSS之外，专一性的概念根本不适用。有计划在fast配置文件中包含一个有限版本的CSS，但目前还没有具体的内容。任何新的发展将在适当的时候增加由div:matches（.foo.bar）和div:has（.foo.bar）此div 元素匹配两个伪类：它是.foo （因为它有“foo”类），并且它有一个带有“bar”类的后代此元素还将匹配div:matches（.foo，.bar）：has（.foo，.bar），这将是一个有效的4级选择器，因为复合选择器可以具有伪类的任何组合：matches（）和：has（）之间的另一个区别是：has（）接受所谓的。相对选择器具有作用域；选择器作用域本身就是一个完整的主题，但就：has（）而言，作用域元素始终是您将：has（）伪类附加到的元素。但是，更重要的是，一个相对选择器可以有一个隐式的后代组合符，也可以显式地以一个组合符开始，例如、+ 或~ ——这个组合符将相对选择器的其余部分链接到其作用域元素例如，虽然:has（）默认为祖先-后代关系，但您可以传递一个以+ 开头的相对选择器，然后它成为相邻的兄弟关系：ul:has（+p）匹配任何紧跟p 的ul 元素（不一定是包含p 子代的子代）至于：matches（），虽然概览表表示它接受复合选择器列表，但似乎还没有确定它是接受复合选择器列表还是复合选择器列表，以及在哪个配置文件中（快速或完整）但复合选择器只是选择器3当前称为的新名称，而复合选择器是一系列复合选择器