CSS :is、:where 和 :has 伪类选择器如何工作

suchonakaniz

CSS 选择器允许您按类型、属性或 HTML 文档中的位置来选择元素。本教程介绍了三个新选项 — 。 Backward Skip 10s Play Video Forward Skip 10s 选择器通常用在样式表中。以下示例找到所有段落元素并将字体粗细更改为粗体您还可以使用 JavaScript 中的选择器来定位 DOM 节点： document.querySelector()返回第一个匹配的 HTML 元素 返回类似数组的NodeList中所有匹配的 HTML 元素 伪类选择器根据 HTML 元素的当前状态来定位它们。也许最著名的是:hover，它在光标移动到元素上时应用样式，因此它用于突出显示可点击的链接和按钮。其他受欢迎的选项包括： Learn to Code with JavaScript :visited：匹配访问过的链接 :target: 匹配文档 URL 所定位的元素 :first-child: 定位第一个子元素 :nth-child：选择特定的子元素 :empty：匹配没有内容或子元素的元素 :checked：匹配切换的复选框或单选按钮 :blank：设置空输入字段的样式 :enabled：匹配已启用的输入字段 :disabled：匹配禁用的输入字段 :required：针对必填输入

字段 :valid: 匹配有效的输入字段 :invalid: 匹配无效的输入字段 :playing：针对正在播放的音频或视频元素 浏览器最近又收到了三个伪类选择器...... CSS：是伪类选择器 注意：这最初指定为这是一个简单的示例，但更复杂的页面将导致更复杂和冗长的选择器字符串。任何选择器中的语 决策者电子邮件列表 法错误都可能破坏所有元素的样式。 CSS 预处理器（例如 Sass）允许嵌套（原生 CSS也支持嵌套）： article, section, aside { p { color: #444; } } 这会创建相同的 CSS 代码，减少打字工作，并可以防止错误。但： Learn to Code with JavaScript 在本机嵌套出现之前，您将需要一个 CSS 构建工具。您可能想要使用 Sass 之类的选项，但这可能会给某些开发团队带来复杂性。 嵌套可能会导致其他问题。构造深度嵌套的选择器很容易，但这些选择器却变得越来越难以读取和输出冗长的 CSS。 :is()提供了一个原生 CSS 解决方案，在所有现代浏览器（不包括 IE）中得到完全支持单个选择器可以包含任意数量的:is()伪类。




例如，以下复杂选择器将绿色文本颜色应用于属于 a 子级的所有元素，该元素具有or<section>类并且不是 an 的第一个子级无需六个 CSS 选择器的等效代码 请注意，:is()不能匹配::before和::after伪元素，因此此示例代码将失败 伪类选择器 选择器语法与所有现代浏览器（不包括 IE）相同:is()并且也受支持。它通常会产生相同的样式。例如： 区别在于特异性。特异性是用于确定哪个 CSS 选择器应覆盖所有其他选择器的算法。在以下示例中，article p比p单独使用更具体，因此 an 中的所有段落元素都<article>将呈灰色 在 的情况下:is()，特异性是在其参数中找到的最具体的选择器。在 的情况下:where()，特异性为零。 考虑以下  color: blue; } 让我们将此 CSS 应用于以下 HTML段落文本将被涂成红色，如下面的 CodePen 演示所示。 Learn to Code with JavaScript 选择:is()器与 具有相同的特异性article p，但它出现在样式表的后面，因此文本变为红色。