锐客网

  1. 首页 > 睿知 > it技术 > >

如何使用CSS伪类选择器

css

总览

CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。
选择器通常在样式表中使用。下面的示例会找到所有段落元素并将字重更改为粗体：
p { font-weight: bold; }

你也可以在JavaScript中使用选择器来找到DOM节点：
  • document.querySelector()返回首个匹配的HTML元素。
  • document.querySelectorAll()返回所有匹配的HTML元素，这些元素位于类数组NodeList中。
伪类选择器根据HTML元素的当前状态来定位它们。也许最广为人知的是 :hover，它在光标移到一个元素上时应用样式，所以它被用来高亮可点击的链接和按钮。
其他受欢迎的选项包括：
  • :visited：匹配访问过的链接
  • :target：匹配文档URL所指向的元素
  • :first-child：指向第一个子元素
  • :nth-child：选择指定子元素
  • :empty：匹配没有内容或子元素的元素
  • :checked：匹配已勾选的复选框或单选按钮
  • :blank：选择用户输入为空的输入框
  • :enabled：匹配一个被启用的输入框。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的
  • :disabled：匹配一个被禁用的输入框。在被禁用时，元素不能被激活或获取焦点
  • :required：指向必填的输入框。所谓必填，就是在提交所属表单之前，用户必须为输入框指定一个值
  • :valid：匹配一个内容验证正确的输入框
  • :invalid：匹配一个内容未通过验证的输入框
  • :playing：指向一个正在播放的audio或video元素
浏览器最近又收到了三个伪类选择器…
:is伪类选择器 注意：这最初被指定为:matches()和:any()，但:is()已经成为CSS标准。
MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
你经常需要在不止一个元素上面应用相同的样式。比如说，段落文本颜色默认为黑色，但是当它位于，， 里面时，文本颜色为灰色：
/* default black */ p { color: #000; }/* gray in , , or*/ article p, section p, aside p { color: #444; }

这是一个简单的例子，但更复杂的页面将导致更复杂和更冗长的选择器字符串。任何选择器的语法错误都会破坏所有元素的样式。
像Sass这样的CSS预处理器允许嵌套（这也将出现在原生CSS中）。
article, section, aside {p { color: #444; }}

这可以创建相同的CSS代码，减少打字的工作量，并可以防止错误。但是：
  • 在原生嵌套到来之前，你仍需要一个CSS构建工具。你可能想使用像Sass这样的方案，但这可能给一些开发团队引入复杂性。
  • 嵌套可能会导致其他问题。构建深度嵌套的选择器是很容易的，但它会变得越来越难以阅读以及输出冗长的CSS。
:is() 提供了一个原生CSS解决方案。该特性已被所有现代浏览器支持（IE除外）。
:is(article, section, aside) p { color: #444; }

单个选择器可以包含任意数量的:is()伪类。比如说，下面的复杂选择器将绿色文本颜色应用于所有、和元素，这些元素是的子元素，其包含类.primary或.secondary，并且不是的第一个子元素。
article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) { color: green; }

【如何使用CSS伪类选择器】没有 :is() 的同等代码需要六个CSS选择器。
article section.primary:not(:first-child) h1, article section.primary:not(:first-child) h2, article section.primary:not(:first-child) p, article section.secondary:not(:first-child) h1, article section.secondary:not(:first-child) h2, article section.secondary:not(:first-child) p { color: green; }

注意，:is()无法匹配::before和::after伪元素，因此下面示例代码会不起作用：
/* NOT VALID - selector will not work */ div:is(::before, ::after) { display: block; content: ''; width: 1em; height: 1em; color: blue; }

:where伪类选择器 :where()选择器语法与:is()相同，也被所有现代浏览器支持（IE除外）。这往往会导致相同的样式。比如：
:where(article, section, aside) p { color: #444; }

不同点在于优先级。优先级是用来决定哪个CSS选择器应该覆盖所有其他选择器的算法。在下面的例子中，article p比单独的p更加具体，因此所有位于内的p元素的字体颜色将会是灰色：
article p { color: #444; } p { color: #000; }

在:is()的情况下，优先级是在其参数中找到的最具体的选择器。在:where()的情况下，优先级为零。
考虑下面的CSS：
article p { color: black; }:is(article, section, aside) p { color: red; }:where(article, section, aside) p { color: blue; }

让我们将这个CSS应用到下面的HTML中：
paragraph text

段落文本将被渲染为红色，点击链接查看CodePen示例。
:is()选择器与article p具有相同的优先级，但它在样式表的后面，所以文本变成了红色。如有必要可以同时删除article p和:is()选择器来应用蓝色，因为:where()选择器的优先级比两者都低。
更多的代码库会使用:is()而不是:where()。然而，:where()的零优先级对CSS重置来说是很实用的，它在没有特定样式的情况下应用标准样式的基线。通常情况下，重置会应用一个默认的字体、颜色、内边距和外边距。
这个CSS重置代码对标题应用了1em的上外边距，除非它们是元素的首个子元素。
/* CSS reset */ h2 { margin-block-start: 1em; }article :first-child { margin-block-start: 0; }

试图在样式表的后面设置一个自定义的上外边距是没有效果的，因为article :first-child有更高的优先级：
/* never applied - CSS reset has higher specificity */ h2 { margin-block-start: 2em; }

你可以用一个更高优先级的选择器来解决这个问题，但这需要更多的代码，而且对其他开发者来说不并不明显。你最终会忘记你为什么需要它。
/* styles now applied */ article h2:first-child { margin-block-start: 2em; }

你也可以通过对每个样式应用!important来解决这个问题，但请避免这样做！它使进一步的样式定义和开发变得更具挑战性。
/* works but avoid this option! */ h2 { margin-block-start: 2em !important; }

一个更好的选择是在你的CSS重置中采用:where()的零优先级。
/* reset */ :where(h2) { margin-block-start: 1em; }:where(article :first-child) { margin-block-start: 0; }

现在，你可以覆盖任何CSS重置样式，无论其优先级如何；不需要进一步的选择器或!important：
/* now works! */ h2 { margin-block-start: 2em; }

:has()伪类选择器 :has()选择器使用了类似于:is()和:where()的语法，但它的目标是一个包含其他元素的元素。比如说，这里是为任何包含一个或多个如何使用CSS伪类选择器
文章图片

这个例子添加了一个导航链接子菜单指示器，其中包含一个子菜单项的列表：
/* display sub-menu indicator */ nav li:has(ol, ul) a::after { display: inlne-block; content: ">"; }

或者，你可以添加调试样式，比如高亮显示所有没有内部img的
元素。
/* where's my image?! */ figure:not(:has(img)) { border: 3px solid red; }

如何使用CSS伪类选择器
文章图片

在打开你的编辑器和重构你的CSS代码库之前，请注意:has()是很新的，支持比:is()和:where()更有限。它在Safari 15.4+和Chrome 105+可用，但是到2023年应该可以广泛使用。
总结 :is() 和 :where() 伪类选择器简化了 CSS 语法。你对嵌套和CSS预处理器的需求会减少。
:has()更具革命性和令人激动。父级选择将迅速流行起来，我们将忘记黑暗时代。
以上就是本文的所有内容，如果对你有所帮助，欢迎点赞收藏转发~

    推荐阅读


    上一篇：SegmentFaul 2022 年社区周报 Vol.7 | 好久不见~

    下一篇：如何在RHEL 9 系统上设置静态ip地址（）