如何使用CSS伪类选择器

更新日期: 2022-08-30阅读: 830标签: 伪类

总览

css选择器允许你通过类型、属性、位于html文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。

选择器通常在样式表中使用。下面的示例会找到所有<p>段落元素并将字重更改为粗体:

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伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

你经常需要在不止一个元素上面应用相同的样式。比如说,<p>段落文本颜色默认为黑色,但是当它位于<article>,<section>,<aside> 里面时,文本颜色为灰色:

/* default black */
p {
  color: #000;
}

/* gray in <article>, <section>, or <aside> */
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()伪类。比如说,下面的复杂选择器将绿色文本颜色应用于所有<h1>、<h2>和<p>元素,这些元素是<section>的子元素,其包含类.primary或.secondary,并且不是<article>的第一个子元素。

article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
  color: green;
}

没有 :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更加具体,因此所有位于<article>内的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中:

<article>
  <p>paragraph text</p>
</article>

段落文本将被渲染为红色:

:is()选择器与article p具有相同的优先级,但它在样式表的后面,所以文本变成了红色。如有必要可以同时删除article p和:is()选择器来应用蓝色,因为:where()选择器的优先级比两者都低。

更多的代码库会使用:is()而不是:where()。然而,:where()的零优先级对CSS重置来说是很实用的,它在没有特定样式的情况下应用标准样式的基线。通常情况下,重置会应用一个默认的字体、颜色、内边距和外边距。

这个CSS重置代码对<h2>标题应用了1em的上外边距,除非它们是<article>元素的首个子元素。

/* CSS reset */
h2 {
  margin-block-start: 1em;
}

article :first-child {
  margin-block-start: 0;
}

试图在样式表的后面设置一个自定义的<h2>上外边距是没有效果的,因为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()的语法,但它的目标是一个包含其他元素的元素。比如说,这里是为任何包含一个或多个<img>或<section>标签的<a>链接添加蓝色、两像素宽的边框的CSS:

/* style the <a> element */
a:has(img, section) {
  border: 2px solid blue;
}

这是几十年来最激动人心的CSS进展!开发者们终于有了一种针对父元素的方法。

难以捉摸的"父选择器"一直是人们请求最多的CSS特性之一,但它给浏览器供应商带来了性能上的麻烦。因此,它已经即将到来了很长时间。简而言之:

  • 浏览器在页面上绘制元素时将CSS样式应用于该元素。因此,在进一步添加子元素时,整个父元素必须重新绘制。
  • 在JavaScript中添加、删除或修改元素可能会影响整个页面的样式,直到闭合的<body> 标签为止。

假设供应商已经解决了性能问题,:has()的引入允许过去没有JavaScript就不可能实现的成为可能。例如,当任何必填的内部字段没有校验通过时,你可以设置外部表单<fieldset>和下面的提交按钮的样式。

/* red border when any required inner field is invalid */
fieldset:has(:required:invalid) {
  border: 3px solid red;
}

/* change submit button style when invalid */
fieldset:has(:required:invalid) + button[type='submit'] {
  opacity: 0.2;
  cursor: not-allowed;
}


这个例子添加了一个导航链接子菜单指示器,其中包含一个子菜单项的列表:

/* display sub-menu indicator */
nav li:has(ol, ul) a::after {
  display: inlne-block;
  content: ">";
}

或者,你可以添加调试样式,比如高亮显示所有没有内部img的<figure>元素。

/* where's my image?! */
figure:not(:has(img)) {
  border: 3px solid red;
}


在打开你的编辑器和重构你的CSS代码库之前,请注意:has()是很新的,支持比:is()和:where()更有限。它在Safari 15.4+和Chrome 105+可用,但是到2023年应该可以广泛使用。

总结

:is() 和 :where() 伪类选择器简化了 CSS 语法。你对嵌套和CSS预处理器的需求会减少。

:has()更具革命性和令人激动。父级选择将迅速流行起来,我们将忘记黑暗时代。

以上就是本文的所有内容,如果对你有所帮助,欢迎点赞收藏转发~

原文翻译自:https://www.sitepoint.com/css-is-where-has-pseudo-class-selectors/

链接: https://fly63.com/article/detial/12058

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用

如何使用JS操纵伪元素

获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。 更换class来实现伪元素属性值的更改、使用CSSStyleSheet的insertRule来为伪元素修改样式、

css获取除第一个之外的子元素

有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。

为什么是link-visited-hover-active

通常我们在设置链接的一些伪类(link,visited,hover,active)样式时,要让不同的状态显示正确的样式,我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍,即 link-visited-hover-active

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!