搜索

首页 >web前端 >css教程 >CSS：IS，：wery and：：pseudo-class选择器工作

CSS：IS，：wery and：：pseudo-class选择器工作

Joseph Gordon-Levitt
Joseph Gordon-Levitt原创
2025-02-09 11:38:10619浏览

CSS：IS，：wery and：：pseudo-class选择器工作

钥匙要点

  • css pseudo-class选择器：is（），：wheing（）和：has（）提供了针对HTML元素的新方法。 ：IS（）选择器允许对多个元素进行更有效的样式，从而减少了对详细选择器字符串的需求。 ：where（）选择器的运行方式与：is（），但具有零特异性，使其可用于应用基线样式而无需提高特异性。 ：HAS（）选择器针对包含其他其他元素的元素，提供了一种已久的靶向父元素的方法。
    • ：is（）和：where（）伪级选择器在所有现代浏览器中都受支持，但在Internet Explorer中不支持。 ：HAS（）选择器当前是新的，但预计到2023年将广泛使用。使用这些选择器可以简化CSS语法并减少CSS预处理器的需求。
  • ：is（）和：where（）选择器的特异性不同。 ：IS（）选择器具有与其参数中最特定的选择器相同的特异性，而：where（）选择器的特异性为零。这对于CSS重置可能是实用的，CSS重置在没有特定样式的情况下应用样式的基线，无论特异性如何，都可以覆盖任何CSS的重置样式。
    • >
  • CSS选择器允许您按类型，属性或HTML文档中的位置选择元素。本教程解释了三个新的选项：：is（），：wheing（）和：has（）。 选择器通常在样式表中使用。以下示例找到了所有

    段落元素，并将字体重量更改为粗体：

    • 您还可以使用JavaScript中的选择器来定位DOM节点： 
<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>
document.queryselector（）返回第一个匹配的html元素
  • document.queryselectorall（）返回类似数组的Nodelist中的所有匹配的HTML元素
    • 伪级选择器基于其当前状态靶向HTML元素。也许最著名的是：悬停，它在光标移动到元素上时采用样式，因此它用于突出可点击的链接和按钮。其他流行的选项包括：
    • ：访问：匹配访问链接
    ：目标：与文档URL
  • 靶向的元素匹配
    • ：第一个孩子：针对第一个子元素
    • ：nth-​​child：选择特定的子元素
    • ：空：匹配没有内容或子元素的元素
    • ：检查：匹配一个切换的复选框或单选按钮
    • ：空白：样式一个空输入字段
    • ：启用：匹配启用的输入字段
    • ：禁用：匹配禁用输入字段
    • ：必需：目标一个必需的输入字段
  • >
    • ：有效：匹配有效的输入字段
    • ：无效：匹配一个无效的输入字段
    • ：播放：定位播放音频或视频元素
浏览器最近收到了另外三个伪级选择器…

css：是伪级选择器

注意：最初指定为：matches（）和：any（），但是：is（）已成为CSS标准。 您通常需要将相同的样式应用于多个元素。例如，

段落文本默认为黑色，但是当它出现在，或中时灰色：

这是一个简单的例子，但是更复杂的页面将导致更复杂和更详细的选择器字符串。任何选择器中的语法错误都可以打破所有元素的样式。 CSS预处理器，例如SASS许可证嵌套（也将介绍给本机CSS）： 
<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>
这会创建相同的CSS代码，减少打字工作并防止错误。但： 
<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>
    >直到本地筑巢到达，您将需要一个CSS构建工具。您可能需要使用SASS之类的选项，但这可能会引入某些开发团队的并发症。
  • 嵌套会导致其他问题。构造深嵌套的选择器变得越来越难以阅读和输出冗长的CSS。
    • ：is（）提供了一个本机CSS解决方案，该解决方案在所有现代浏览器（不是IE）中都具有全部支持：
  • 单个选择器可以包含任何数字：IS（）伪级。例如，以下复杂选择器将绿色文本颜色应用于所有

    ，

    和

    元素，这些元素是的孩子，该具有一类。 的第一个孩子：

    • 不含：IS（）的等效代码需要六个CSS选择器：
请注意：IS（）无法匹配:: pseudo-emlements之后，因此此示例代码将失败： 
<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>
css：pseudo-class选择器
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>
：withing（）选择器语法与：IS（）相同，并且在所有现代浏览器（不是IE）中也得到了支持。它通常会导致相同的样式。例如： 
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>
差异是

>特异性

。特异性是用于确定哪些CSS选择器应覆盖所有其他算法的算法。在下面的示例中，第P条比单独的P更具体，因此中的所有段落元素都是灰色的： 
<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>
如果是：is（），特异性是其参数中最特定的选择器。如果是：where（），特异性为零。 考虑以下CSS： 让我们将此CSS应用于以下HTML： 如下所示，段落文本将被涂上红色。 
<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>
请参阅笔 使用：IS sitepoint（@SitePoint）的选择器 在codepen。
<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>
上：IS（）选择器具有与文章P的特异性相同的特异性，但是在样式表的稍后，因此文本变成红色。有必要删除p和：IS（）选择器以应用蓝色的颜色，因为：where（）选择器比任何一个都不具体。 将使用更多的代码库：IS（）而不是：whese（）。但是，零特异性的零特异性：（）对于CSS重置可能是实用的，CSS重置是在没有特定样式的情况下应用标准样式的基线。通常，RESETS应用默认字体，颜色，桨和边距。 此CSS重置代码将1EM的最高边距应用于

标题，除非它们是元素的第一个孩子： 
<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>
试图在样式表的稍后设置自定义

没有效果，因为文章：第一孩子具有更高的特异性： 
<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>
您可以使用更高特异性的选择器来解决此问题，但对于其他开发人员来说，它是更多的代码，不一定是显而易见的。您最终会忘记为什么需要它： 
<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>
您还可以通过应用于每种样式的重要性来解决问题，但是请避免这样做！ 一个更好的选择是在您的CSS重置中采用零特异性：white（）： 
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>
现在，无论特异性如何，您都可以覆盖任何CSS重置样式；无需进一步的选择器或！重要： 
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>
CSS：具有伪级选择器

：has（）选择器使用类似的语法为：is（）和：wheing（），但它针对一个

包含>的元素。例如，这是在任何包含一个或多个CSS：IS，：wery and：：pseudo-class选择器工作>或标签的链接中添加蓝色的两金边框的CSS： 这是几十年来最令人兴奋的CSS发展！ 
<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>
开发人员终于有一种方法来瞄准父元素！ 难以捉摸的“家长选择器”一直是最要求的CSS功能之一，但它会使浏览器供应商的性能并发症，因此已经很长时间了。用简单的术语：
    浏览器在页面上绘制时将CSS样式应用于元素。因此，在添加进一步的子元素时，必须重新绘制整个父元素。
  • >
    • 添加，删除或修改JavaScript中的元素可能会影响整个页面的样式，直至封闭。
  • 。
假设供应商已经解决了绩效问题，则引入了：HAS（）允许在过去的JavaScript上可能是不可能的。例如，当任何必需的内部字段无效时，您可以设置外部形式

的样式
和以下提交按钮： 
<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>
CSS：IS，：wery and：：pseudo-class选择器工作 此示例添加了一个导航链接子enu指标，其中包含一个子菜单项列表： 
<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>
或者，也许您可​​以添加调试样式，例如突出显示所有元素而没有内部IMG： 
<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>
CSS：IS，：wery and：：pseudo-class选择器工作 在您跳入编辑器并重构CSS代码库之前，请注意：HAS（）是新的，并且支持比：is（）和：where（）更有限。它可以在Safari 15.4和Chrome 101中提供，但在2023年之前应广泛使用。

选择器摘要

：is（）和：wheing（）伪级选择器简化了CSS语法。您对嵌套和CSS预处理器的需求更少（尽管这些工具还提供了其他好处，例如部分，循环和缩小）。 ：has（）更具革命性和令人兴奋的作用。父母的选择将迅速流行，我们将忘记黑暗时代！我们将在所有现代浏览器中可用时发布完整的：has（）教程。 如果您想对CSS伪级选择器进行更深入的研究，以及所有其他CSS（例如网格和Flexbox），请查看Tiffany Brown的《很棒的书》css Master 。

经常询问有关CSS的问题（FAQ）：is（）和：wheing（）伪级选择器

>

：is（）和：where（）pseudo-class选择器之间的主要区别是什么？在于它们的特殊性。 ：IS（）伪级选择器具有与放置在其中的选择器相同的特异性。另一方面，：where（）伪级选择器的特异性为零，这意味着它不会有助于选择器的整体特异性。当您要在不增加特异性的情况下将样式应用于一组元素时，这可能特别有用。

>我可以使用：is（）和：where（）pseudo-class selectors具有所有CSS属性？ >

是的，您可以使用：is（）和：wheing（）伪级选择器具有所有CSS属性。这些伪级选择器与特定的CSS属性无关。它们用于根据某些条件选择元素，您可以将任何CSS属性应用于选定的元素。

is：is（）和：where（）pseudo-class选择器在所有浏览器中支持？

>：is：is（）和：where（）pseudo-class选择器是CSS的相对较新的添加在大多数现代浏览器中支持。但是，在较旧的浏览器或某些版本的Internet Explorer中可能不支持它们。在使用代码中使用这些选择器之前，请检查网站上的当前浏览器支持总是一个好主意。

>如何使用：is：is（）pseudo-class selector在css中？ >

：IS（）在CSS中的伪级选择器允许您将多个选择器分组为一个。例如，您可以使用：is（）pseudo-class选择器像这样的h1，h2和h3编写三个独立的选择器，例如： }。

>我如何使用CSS中的pseudo-class选择器？ IS（）伪级选择器，但具有零特异性。例如，您可以使用它来选择具有特定类别的所有元素，而不会增加特异性：： where（.class1，.class2，.class3）{color：blue; 。当您要选择满足多个条件的元素时，这可能很有用。例如，您可以在类似的div元素中选择所有H1和H2元素：DIV：IS（H1，H2）{颜色：蓝色； }。

>我可以使用：is（）and：where（）伪级选择器带有伪元素的选择器吗？

是的，您可以使用：is（）和：where（）pseudo - 具有伪元素的类选择器。例如，您可以选择像这样的H1和H2元素的所有首字母：： IS（H1，H2）::第一字母{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class选择器具有属性选择器？

是的，您可以使用：is（）和：where（）pseudo---具有属性选择器的类选择器。例如，您可以使用这样的数据属性选择所有元素：： IS（[data-attribute]）{颜色：blue; }。

>我可以使用：is（）和：where（）pseudo-class选择器具有类选择器？

是的，您可以使用：is（）and：where（）pseudo--类选择器的类选择器。例如，您可以选择所有类似某个类别的元素：： IS（.class1，.class2，.class3）{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class选择器具有ID选择器的pseudo-class选择器吗？

是的，您可以使用：is（）和：where（）pseudo--具有ID选择器的类选择器。例如，您可以选择具有这样的ID的所有元素：： IS（＃ID1，＃ID2，＃ID3）{颜色：blue; }。

以上是CSS：IS，：wery and：：pseudo-class选择器工作的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css chrome safari less html sass Array if for while select checkbox include Error break using class finally Attribute Property number default dom this location margin border input idea Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Quick Tip: Shipping Resilient CSS Components下一篇：Webflow Review: Is It a Serious Option for Developers?

相关文章

查看更多