[译]19个CSS level 4 选择器

柔光的暖阳◎ 2022-04-27 17:00 131阅读 0赞

>  *  原文作者：[Marouen Mhiri][]
>  *  原文链接：[19 CSS-Level-4 selectors][]（原文标题是20，但实际只有19个）
>  *  译者：陈大鱼头
>  *  推荐理由：因为喜欢CSS啊

**你不得不 ? CSS**

**以下所有选择器的兼容性表格内容都截止于原文首发时间，若要看最新的兼容性状态，请查看[文档][Link 1]**

## 1. Checkbox — Indeterminate状态 ##

这是`<input type="checkbox">`第三个状态。除了`:checked`和`:unchecked`的伪类选择器之外，还可以使用另一个状态`:indeterminate`。

它长得像这样（在chrome下）:

**警告**：状态`indeterminate`**不能**像这样`<input type='checkbox' indeterminate>`写在`HTML`里。只能像这样写在`Javascript`里：

-- HTML--
    <input type="checkbox" class="indeterminate">
    -- JS --
    document.querySelector('.indeterminate').indeterminate = true;
    复制代码

复选框仍然只能计算`checked`或`unchecked`的状态，`indeterminate`伪类选择器只是个可视化的状态。

浏览器支持状态：

[caniuse — :indeterminate][caniuse_indeterminate]

## 2. Negation ##

在`Selectors Level 4`中`:not()`伪类选择器可以输入一个要排除在外的CSS属性数组。

在`Selectors Level 3`中`:not()`只能接受一个简单的选择器。

但现在，你能把`:not(a):not(.b):not([c])`写成`:not(a, .b, [c])`

/* 除了.teaser-left, .teaser-right, .teaser-top之外所以的div的盒子模型都会变成flex */
    div:not(.teaser-left, .teaser-right, .teaser-top) {
      display: flex;
    }
    
    /* 除了最后一个以外的div的margin-right都会变为0 */
    div:not(:last-child) {
      margin-right: 0;
    }
    
    /* 除了第一个以外的div的padding都会变成0 */
    div:not(:first-of-type) {
      padding: 0;
    }
    复制代码

浏览器支持状态：（译者注：Safari居然弯道超车了...比Chrome跟Firefox更早的支持这个属性?）

[caniuse — :not()][caniuse_not]

## 3. Matches ##

匹配任何属性的伪类选择器`:matches()`是一个函数式的伪类选择器，可以传入选择器列表作为参数。它表示则由传入参数的表示的元素。

`:matches()`算是与`:not()`相对的伪类选择器。

/* 给所有class为container跟subcontainer的div的padding-left变为20px' */
    div:matches(.container, .subcontainer) {
      padding-left: 20px;
    }
    
    /* ------------- */
    
    /* 可以这么写 */
    :matches(article, aside, nav) div.headline {
      color: #BADA55;
    }
    
    /* 也可以这么写... */
    section div.headline,
    aside div.headline,
    nav div.headline {
      color: #BADA55;
    }
    复制代码

**注意：**`matches()`跟`:not()`互相嵌套或者`:matches()`嵌套`:matches()`都是不执行的。

/* 不执行 */
    :matches(:not(...))
    
    /* 不执行 */
    :not(:matches(...))
    
    /* 不执行 */
    :matches(:matches(...))
    复制代码

浏览器支持状态：

[caniuse — :matches()][caniuse_matches]

## 4. Case-sensitivity ##

这个选择器接受所有属性的值为输入项的元素。

input[value="name" i] {
      background:red;
    }
    复制代码

在这个例子中，所有匹配到`value`为`name`（不管大小写），例如`Name`，`NAME`, `nAmE`的`<input />`元素的背景色都为`red`。

浏览器支持状态：

[caniuse — :case][caniuse_matches]

## 5. Relational ##

亲属伪类选择器`:has`只能选择包含特定内容的元素。

/* 每个包含article标签的section的margin-bottom都为20px */
    section:has(article) {
      margin-bottom: 20px;
    }
    
    /* 每个h1之前的div的padding-left都为10px */
    div:has(+ h1) {
      padding-left: 10px; 
    }
    复制代码

浏览器支持状态：（译者注：这个选择器挺好用的，可惜全线飙红?）

[caniuse — :has][caniuse_has]

## 6. Language ##

早在`CSS2` 的时候就有`:lang()`伪类选择器了，只是在`Level 4`选择器添加了通配符匹配。`:lang()`里的参数代表了所选择的语言。

/* 下例表示选择文本语言带有-TN的div元素 (ar-TN, fr-TN). */
    
    div:lang(*-TN) {
      background-color: green
    }
    复制代码

浏览器支持状态：没有一个支持的。（译者注：比:has()还惨。。好吧，虽然看起来并没有什么区别。）

## 7. Directionality ##

`:dir()`伪类选择器代表着`HTML`文档书写方向的元素。

/* 下例代表选择所有文档书写方向为从左到右的blockquote标签的border-left为5px solid #555 */
    
    blockquote:dir(ltr) {
      border-left: 5px solid #555;
    }
    
    /* 下例代表选择所有文档书写方向为从右到左的blockquote标签的border-right为5px solid #555 */
    
    blockquote:dir(rtl) {
      border-right: 5px solid #555;
    }
    复制代码

浏览器支持状态：只有火狐。

## 8. Time-Dimensional ##

这个伪类选择器会选择`HTML5`中`<video>`的语言渲染以及播放过程中的时间维度相对元素。所有相关的选择器都像`:matches()`。这几个伪类选择器的区别在于`:past`会选择`:current`所选的元素之前的所有节点。所以，`:future`就是指之后的所有节点了。

这几个伪类选择器同样是没有浏览器支持，但是用法如下：

/* Current */
    :current(p, span) {
      background-color: yellow;
    }
    
    
    /* Past */
    :past,
    /* Future */
    :future {
      display: none;
    }
    复制代码

浏览器支持状态：同样是没有一个支持的。

[css4selectors — time-dimentional][css4selectors_time-dimentional]

## 9. Drag & Drop ##

`:drop`伪类选择器匹配任何正在拖动的元素最终放置的目标元素。 `:drop()`伪类则类似于`:drop`，但允许指过滤规则，用以排除某些放置目标。 此伪类目前处于[Working Draft][]状态。

/* 下面的例子给每一个放下的标签添加一个黄色 1px 的实线轮廓 */
    
    :drop {
      outline: 1px solid yellow;
    }
    
    /* 下面的例子给所有正在活动以及有效的放置目标添加一个黄色 1px 的实线轮廓，请注意两个关键字valid和active是用空格隔开的 */
    
    :drop(valid active) {
      outline: 1px solid yellow;
    }
    复制代码

浏览器支持状态：同样是没有一个支持的。

## 10. Hyperlink ##

`:any-link`伪类选择器表示着作为超链接的源锚点元素（具有href属性的元素）。换而言之，就是任何匹配`:link`和`:visited`的元素。

/* all links within the element with the id 'content' will be red without an underline. */
    #content a:any-link {
      color: red;
      text-decoration: none;
    }
    复制代码

浏览器支持状态：支持带前缀的。

E:-webkit-any-link {
        /* Chrome, Safari, Opera */}
    E:-moz-any-link {
        /* Firefox */}
    复制代码

## 11. Local-Link ##

使用`:local-link`伪类选择器可以单独格式化本地链接（原文是`local links`）(内部链接)。

a:local-link {
       text-decoration: none;
    }
    复制代码

浏览器支持状态：同样是没有一个支持的。

## 12. Default-Option ##

`:default`伪类选择器匹配一组相似元素中默认的所有UI元素。举个例子，默认在`<form>`里的`<button>`或者`<select>`中最初的`<option>`。

/* 把所有的默认UI元素的margin值变为5px */
    
    :default {
      margin: 5px;
    }
    复制代码

浏览器支持状态：

[caniuse — default][caniuse_default]

## 13. Validity ##

判断有效性的伪类选择器（`:valid`和`:invalid`）匹配有效或无效，`<input>`或`<form>`元素。

`:valid`伪类选择器表示值通过验证的`<input>`，这告诉用户他们的输入是有效的。

`:invalid`伪类选择器表示值不通过通过验证的`<input>`，这告诉用户他们的输入是无效的。

<input type="text" pattern="[\w]+" required />
    <input type="tel" pattern="[0-9]+" required />
    
    /* 所有有效的输入字段都将具有绿色轮廓,
    无效的将有一个红色轮廓. */
    input:valid {
      outline: 1px solid green;
    }
    
    input:invalid {
      outline: 1px solid red;
    }
    复制代码

浏览器支持状态：

[caniuse — validity][caniuse_validity]

## 14. Range ##

如果一个时间或数字`<input>`具有`max`或`min`属性，那么`:in-range`会匹配到输入值在指定范围内的`<input>`，`out-of-input`则匹配输入值不在指定范围的`<input>`。如果没有规定范围，则都不匹配。

/* 所有数字输入框，如果输入内容在其范围内，背景色则变成绿色，否则变为红色 */
    
    input[type="number"]:in-range {
      background-color: green;
    }
    
    input[type="number"]:out-of-range {
      background-color: red;
    }
    复制代码

浏览器支持状态：

[caniuse —range][caniuse_range]

## 15. Requirement ##

伪类选择器`:required`和`:optional`匹配了必填或可选的`<form>`元素。

<input type="text" required>
    <input type="text">
    
    
    /* 所有必填输入框在鼠标移过的时候都会显示一个橙色1px的底部实线边框 */
    
    input:required:hover{
      border-bottom: 1px solid orange;
    }
    input:optional:hover {
      border-bottom: 1px solid green;
    }
    复制代码

浏览器支持状态：

[caniuse — require][caniuse_require]

## 16. User interaction ##

`:user-error`伪类选择器表示选择一个输入内容不正确的input元素，但是只有在用户操作之后才会显示。

/* 用户输入任何无效，超出范围，或者该有内容却为空的内容时，input将会出现一个为1px红色的虚线。 */
    
    input:user-error {
      border-bottom: 1px dashed red;
    }
    复制代码

浏览器支持状态：没有支持的浏览器。（译者注：这么好用的伪类，可惜浏览器不支持，太可惜了。）

## 17. Mutability ##

可变性伪类选择器表示其内容是否是用户可以修改的元素。

`:read-only`

`:read-only`伪类选择器表示当前元素是用户不可修改的。

`:read-write`

`:read-write`伪类选择器表示当前元素是用户可修改的。这个伪类选择器可以使用在一个可输入的元素或\`\`contenteditable``元素（HTML5 属性）。

<input type="text" placeholder='text here'>
    <input type="tel" placeholder='number here'>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    
    /*
    大多数元素（这里是选择框）将会拥有一个绿色且大小为20px的字体。
    可读写元素（这里是input框）将会有一个橙色的边框，而且字体大小为18px。
    */
    :read-only {
      font-size: 20px;
      color: green;
    }
    
    :read-write {
      border: 1px solid orange;
      font-size: 18px;
    }
    复制代码

浏览器支持状态：

[caniuse — mutability][caniuse_mutability]

## 18. Tree structural ##

树状结构的伪类选择器是在`CSS3`中引入的。在`level 4 选择器`中添加了`:blank`。这些伪类选择器所选择的元素是在文档树中的。

`:blank`伪类选择器类似于`:empty`，但是也能匹配到元素内容的空白符（空格，tabs和换行）。

/* 所有内容为空的div的margin都设为0 */
    
    div:blank {
      margin: 0;
    }
    复制代码

浏览器支持状态：只有桌面端的火狐支持（需要前缀）

## 19. Descendant Combinator ##

后代组合子（`E >> F`）的作用跟`E F`基本相同。

p >> span {
       color: green;
    }
    /* 也可以这么写 */
    p span {
      color: green;
    }
    复制代码

浏览器支持状态：目前都不支持。

**正如你所见，CSS将要诞生一堆新的选择器（*希望吧 :-)*）。对于有效的选择器，我有着极大的兴趣，并且现在也有把它们用在生产系统上。我希望你们可以找时间来了解这些新的功能并且持续关注这相关的问题 [www.w3.org/TR/selector…][www.w3.org_TR_selector]**

**译者注：CSS跟EMCAScript一样不断的在更新着。但可能是国情（国产浏览器的兼容问题，用户使用的系统版本等），也有可能是不是太过重视CSS，所以目前在国内开发者对CSS热情并不高，也有很多人不愿意深入去了解CSS。鱼头我跟原文作者一样，都是很喜欢CSS的人，真心希望这些新的CSS属性可以尽快被现代浏览器兼容，也希望有更多的开发者重视并愿意持续投入精力学习CSS。顺便吐槽一下，原文标题是“20个CSS 等级4的选择器”，但实际只有19个。**

如果你、喜欢探讨技术，或者对本文有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“ **鱼头的Web海洋**”，随时与鱼头互动。欢迎！衷心希望可以遇见你。

[Marouen Mhiri]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40MarouenMhiri
[19 CSS-Level-4 selectors]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40MarouenMhiri%2F20-css-level-4-selectors-6a9c9e7f78ef
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fcss4-selectors.com%2Fselectors%2F%23level-4
[caniuse_indeterminate]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dindeterminate
[caniuse_not]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3D%253Anot
[caniuse_matches]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dmatches
[caniuse_has]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23feat%3Dcss-has
[css4selectors_time-dimentional]: https://link.juejin.im?target=https%3A%2F%2Fcss4-selectors.com%2Fselector%2Fcss4%2Ftime-dimensional-pseudo-class%2F
[Working Draft]: https://link.juejin.im?target=https%3A%2F%2Fdrafts.csswg.org%2Fselectors-4%2F%23selectordef-drop-function
[caniuse_default]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3D%253Adefault
[caniuse_validity]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3D%253Avalid
[caniuse_range]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3D%253Ain-range
[caniuse_require]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3D%253Arequire
[caniuse_mutability]: https://link.juejin.im?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dread-only
[www.w3.org_TR_selector]: https://link.juejin.im?target=https%3A%2F%2Fwww.w3.org%2FTR%2Fselectors-4%2F%23issues-index