css选择器选择3和4_有趣CSS Level 4选择器

css选择器选择3和4

多年来，CSS选择器取得了长足的进步，为开发人员提供了更多功能来定位页面上的特定位。 本文中的示例是CSS选择器4级规范的一部分。 让我们深入研究其中七个有趣的选择器，我保证其中一些尚未在实践中使用！

选择器级别4

级别4规范当然包含一些众所周知的选择器，例如nth-child ，但它也包含一些非常独特的字符。 在Level 4规范中，许多概述了许多新颖且非常有用的伪类和伪选择器，因此，在该主题上，让我们简要回顾一下CSS中伪时单冒号和双冒号之间的区别。

单伪双冒号

如今，作为一般规则，应使用双冒号::而不是单个冒号:来将伪类与伪元素和内容（如规范所述）区分开。

“引入这种（双冒号）表示法……是为了在伪类和伪元素之间建立区别。 为了与现有样式表兼容，用户代理还必须接受CSS级别1和2（即：first-line，：first-letter，：before和：after）中引入的伪元素的以前的单冒号表示法。 CSS级别3中引入的新伪元素不允许这种兼容性。” – W3C规范

好的，这很清楚，但是类和元素之间有什么区别？

伪类vs伪元素

伪类始终由“冒号”组成:其后是伪类的名称（关键字），对于功能性伪类，其后是括号之间的一个或多个参数（类似于CSS函数）。 这是作者指定和定位所选元素的特殊状态的一种方法。

“伪类使您不仅可以将样式应用于文档树的内容，还可以将其应用于外部因素，例如导航器的历史（例如:visited ），其内容的状态（例如:checked在某些表单元素上:checked ）或鼠标的位置（例如:hover ，它可以让您知道鼠标是否在元素上）。” – MDN Web文档

伪元素会创建超出文档语言指定的抽象的文档树抽象。 例如，文档语言不提供访问元素内容的“首字母”或“第一行”的机制。 伪元素允许作者引用本来无法访问的信息。

伪元素还为作者提供了一种机制，可以引用源文档中不存在的内容，例如众所周知的::before和::after伪元素，它们允许访问CSS 2中生成的内容。

现在，我们已经摆脱了后勤问题，让我们深入研究其中一些有趣CSS 4级选择器。

1.：匹配（）

:matches()伪类无疑是来自第4级的强大选择器，但浏览器仍在讨论其包含（Safari（WebKit）除外）的选择器。

一般来说，它可以用于将多个选择器规则组合成一条简洁的行。 它接受选择器列表作为其参数。 这些参数可以是复合选择器和复杂选择器 ，但是不允许组合器选择器 。

/* Chrome */
:-webkit-any(:hover, :focus, :active) {
  color: #222;
}

/* Firefox */
:-moz-any(:hover, :focus, :active) {
  color: #222;
}

/* Safari */
:matches(:hover, :focus, :active) {
  color: #222;
}

尽管此代码段将:hover ， :focus和： active所有常规状态组合到一个规则:focus ，但仍未显示其具有的潜力。 接下来，我们将回顾一个更复杂的示例。

如果您熟悉“嵌套”，请准备好袜子了。 可以将Matchs与其他:matches选择器组合使用，以模仿许多预处理器用户都喜欢的相同功能，但它来自CSS！

:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) {
  color: goldenrod;
}

/* equivalent to: */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6, 
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  color: goldenrod;
}

如果您愿意，甚至可以将它们串在一起，以开拓另一种可能性。

/* Firefox */
:-moz-any(a):-moz-any(:link, :visited) {
  color: blue;
}
:-moz-any(a):-moz-any(:hover, :focus, :active) {
  color: red;
  text-decoration: none;
}

/* Chrome */
:-webkit-any(a):-webkit-any(:link, :visited) {
  color: blue;
}
:-webkit-any(a):-webkit-any(:hover, :focus, :active) {
  color: red;
  text-decoration: none;
}

/* Safari */
:matches(a):matches(:link, :visited) {
  color: blue;
}
:matches(a):matches(:hover, :focus, :active) {
  color: red;
  text-decoration: none;
}

这个例子等同于写作：

a:link,
a:visited {…}

a:hover,
a:focus,
a:active {…}

请记住:matches() 不能嵌套（ :matches(:matches()) ）并且不能与:not() （ :matches(:not()) :not(:matches()) ）。

遗憾的是，此选择器的规范仅在Safari中得到了巩固，仍在等待其他浏览器供应商的支持，因此与此同时，您必须使用单独的声明和供应商前缀。 当前，诸如Autoprefixer之类的工具不支持:matches() ，但是不用担心，因为我最近在GitHub上提出了要求此支持的问题。

如果您有使用此选择器的示例并想分享，请在下面的评论中发布。 我们始终喜欢美味的CodePen演示！

2 .：占位符显示

输入元素可以选择向用户显示占位符文本，以提示应在输入中键入的内容。 当placeholder属性出现在输入标签上并因此与显示占位符文本的输入元素匹配时，会发生这种情况。

/* affects entire input */
:placeholder-shown {
  opacity: 1; /* works */
  color: gold; /* sketchy */
  background: blue; /* works */
  font-weight: bold; /* works */
  border: 1px solid red; /* works */
}

/* only affects placeholder text */
::placeholder {
  opacity: 1; /* works */
  color: gold; /* works */
  background: goldenrod; /* works */
  font-weight: bold; /* works */
  border: 1px solid red; /* works */
}

本质上:placeholder-shown用于在显示其占位符文本时选择输入本身，而::: placeholder则为::placeholder符文本设置样式。 实际上，在CSS伪元素模块4级编辑器草案中提到了有关:placeholder文档。 请记住:placeholder-shown是一个伪类 （它是处于特定状态的元素），而::placeholder是一个伪元素 （在DOM中不是可见的东西）。

在我的研究中，我发现color是一种特殊的属性（当与:placeholder-shown一起使用以更改占位符文本颜色时）仅受Firefox认可，而Chrome和Safari保留了灰色的占位符文本颜色。

3：任何链接

:any-link伪类表示一个元素，该元素充当超链接的源锚。

:any-link {…}

例如，在HTML5中，具有href属性的任何<a> ， <area>或<link>元素都是与:any-link匹配并等同于:matches(:link, :visited) 。 在我看来，它是一个非常特殊的选择器，显然仍在等待一个更好的名称，但是，如今，除了Edge之外，支持相当广泛。

Autoprefixer当前支持此属性，并为需要它们的浏览器提供正确的供应商前缀。

4 .：不确定

伪类:indeterminate是用于特定表单元素的选择器，适用于所有媒体。

:indeterminate {
  outline: 2px solid red;
}

通常，当不存在checked属性时，此选择器将匹配输入，例如单选和复选框。 诸如此类的输入可以不带检查或未检查状态而存在。

它还选择诸如progress元素之类的没有value内容属性的元素（即，完成百分比未知时）。 目前，许多广泛使用的浏览器供应商的支持非常稳定。

5.：用户错误

伪类:user-error表示输入元素输入错误，但仅在用户与之交互之后。 例如，从用户尝试提交表单之时开始，以及在用户再次与form元素进行交互之前。

:user-error {
  background: red;
  color: red;
  border: 2px solid red;
}

但是，就没有支持，也没有办法知道主要的浏览器供应商是否会实现。 暂时最好使用:invalid或:required如果您需要为Web表单使用这种错误样式）。

:invalid {
  background: red;
  color: red;
  border: 2px solid red;
}

6.：可选

伪类:optional可以在值有效时且在提交其所属的表单之前使用。

:optional {…}

它选择任何不存在required属性的input或textarea元素。 这使表单可以轻松地指示可选字段，并相应地设置其样式。

这是选择器级别4规范草案中包含的文档很少的选择器之一。

7.：范围

伪类:scope可以通过在<style>元素（您想要应用样式的子树的根元素的直接子元素）上设置scoped属性来限制仅适用于页面一部分的样式规则。 。 这将样式限制为仅影响作为<style>元素及其所有后代的父元素的元素，或者换句话说，影响<style scoped>元素的父元素以及其中的任何内容。

<ul>
  <style scoped>
    :scope {
       color: red;
    }
  </style>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

不幸的是，大多数浏览器不支持它，或者一次不支持它，并且此后将其完全删除。 尽管Chrome和Safari注册了伪类的匹配项，因此应用了CSS规则，但它们尚不支持样式范围本身。 这意味着所应用CSS规则会泛滥到文档的预期部分之外，并且等于:root 。

根据目前的研究上的Chrome 35和FF 55去除支持然而曾几何时，Chrome和Firefox支持的时间:scope 。 所有这些来回使示波器的外观看起来非常严峻， 根据《我可以使用吗》，当前大多数浏览器的支持都位于标记后面。

结论

当然，在第4级中有一些非常有前途的选择器，而本文中未提及更多选择器。 与规范形式中的任何内容一样，某些选择器可能会随着时间的推移而略有变化，或者会完全删除。 作为开发人员，我们有责任坚持最重视的东西，并确保负责团队知道。 如果您有任何疑问或意见，甚至前面提到的选择器示例，请在下面发布。 编码愉快！

翻译自: https://webdesign.tutsplus.com/tutorials/intriguing-css-level-4-selectors--cms-29499

css选择器选择3和4