CSS选择器4是下一代CSS选择器规范

时间 2019-11-30

原文原文链接

那么，这一版本的新东西有哪些呢？css

选择器配置文件

CSS选择器分为两类：快速选择器和完整选择器。快速选择器适用于动态CSS引擎。完整选择器适用于速度不占关键因素的状况，例如document.querySelector。html

选择器上下文不一样，发挥的做用不一样。一些功能强大的选择器很遗憾太慢了，不能切实地适应高性能环境。要作到这一点，须要在选择器规范里定义两个配置文件[参见]。web

:HAS

:has选择器是第四代选择器中最有趣的部分，但它有个重要的警告，下面会描述。它能让你改变选择器的选择对象，即实际将被赋予样式的特定元素，同时它还会继续和后文中出现的元素进行匹配。它开辟了许多匹配上下文的新方法。例如，匹配一个header：浏览器

 
        // 有一个头元素的任何部分 
       
        section:has(h 
        1 
        , h 
        2 
        , h 
        3 
        , h 
        4 
        , h 
        5 
        , h 
        6 
        )

或者开发人员能够匹配只包含必定数量图片的段落：ide

 
        // 侧边栏和五个子类 
       
        div.sidebar 
       
        :has(*:nth-child( 
        5 
        ))       // 拥有第 
        5 
        个子类 
       
        :not(:has(*:nth-child( 
        6 
        ))) // 但不具备第 
        6 
        个子类

甚至能够匹配包含特定子类数量的元素（本例有5个）：工具

 
        // 匹配一个全是图像的段落 
       
        :has(img)             // 拥有一个图像 
       
        :not(:has(:not(img))) //全部内容均是图像

警告：此时:has选择器并无想象中的快速，这代表它不能在样式表中使用。因为目前尚未人实现这个选择器，它的性能特征还尚待研究。若是浏览器跟得上的话，它很快就能用于通常样式了。post

早期版本的规范会在主题旁添加一个感叹号（！）表示警告，不过如今没有了。性能

:MATCHES

:matches是:moz-andy和:webkit-any的标准化选择器，已经与浏览器前缀共存了一段时间。它容许样式表的建立人员删除重复的规则路径。spa

它的用处是，对一个相似笛卡尔积（Cartesian-product-esque）的SCSS/SASS输出进行整理，好比下面这段：设计

 
        body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child( 
        4 
        ) ~ a.image.standard,  
       
        body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child( 
        4 
        ),  
       
        body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child( 
        4 
        ) ~ a.image.standard,  
       
        body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child( 
        4 
        ),  
       
        body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child( 
        4 
        ) ~ a.image.standard,  
       
        body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child( 
        4 
        ),  
       
        body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child( 
        4 
        ) ~ a.image.standard,  
       
        body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child( 
        4 
        ) { 
       
        .... 
       
        }

能够输出为下面这种更便于维护的样式：

 
        body > .layout > .body > .content  
       
        :matches(.post, .page)  
       
        :matches(p, li)  
       
        :matches(a.image.standard:first-child:nth-last-child( 
        4 
        ),  
       
        a.image.standard:first-child:nth-last-child( 
        4 
        ) ~ a.image.standard),  
       
        .... 
       
        }

上述Mozilla的参考页列出了有关性能的一些注意事项。既然这个选择器致力于成为标准，咱们但愿能看到更多有关性能方面的工做，使之更轻便。

:NTH-CHILD(AN+B [OF S])

虽然:nth-of-typey自世纪之交就已经存在，但第四代选择器在此基础上增添了一个过滤功能：

 
        div :nth-child( 
        2 
        of .widget)

选择器S用于肯定索引，它独立于伪类左边的选择器。如规范中提到的，若是你提早知道了元素的的类型，就能够将:nth-of-type选择器转化为:nth-child(… of S)，如：

 
        img:nth-of-type( 
        2 
        ) => :nth-child( 
        2 
        of img)

这个选择器和:nth-of-type的区别是微妙但重要的。对于:nth-of-type，不管是否给一个元素添加了选择器，它都会对有相同标记的内容加入隐式索引。每当你使用一个新的选择器，:nth-child(n of S)就会使计数器加1.

这个选择器有潜在的缺陷。由于：nth-child 伪类中的选择器是独立于其左边的选择器的，若是你在左边制定一个非:nth-child中的父级选择器的话，你可能会意外地漏掉一些东西。例如：

 
        tr:nth-child( 
        2 
        n of [disabled])

:NOT()

你可能已经用了:not一段时间，你能够经过传递多个参数来节省大小和手工输入。

 
        // 至关于： 
       
        //    :not(h 
        1 
        ):not(h 
        2 
        ):not(h 
        3 
        )... 
       
        :not(h 
        1 
        , h 
        2 
        , h 
        3 
        , h 
        4 
        , h 
        5 
        , h 
        6 
        )

后代结合符（>>）

早期CSS中，后代选择符的做用是一段()空间，不过如今做用更加明显：

 
        // 至关于： 
       
        //    p img { ... } 
       
        p >> img { ... }

这样作是为了联系直接后代(>)和shadow DOM(>>>)操做符。

列结合符(||)和:NTH-COLUMN

CSS4增长了列操做功能，这样开发人员就能更简便地在表格里对单独的列进行设计。目前设计表格须要使用 :nth-child，如此一来就不须要使用colspan 属性来匹配表格的列。

经过使用新的列组合符（||），你能够用<col>标记表中的相同列，而后对该列中的单元格进行设计：

 
        // 下面的例子使单元格C,E,G为黄色。  
       
        // 例子来源于CSS选择器 
        4 
        规范 
       
        col.selected || td { 
       
        background 
        : yellow; 
       
        color 
        :  
        white 
        ; 
       
        font-weight 
        :  
        bold 
        ; 
       
        } 
       
        <table> 
       
        <col span= 
        "2" 
        > 
       
        <col class= 
        "selected" 
        > 
       
        <tr><td>A <td>B <td>C 
       
        <tr><td colspan= 
        "2" 
        >D <td>E 
       
        <tr><td>F <td colspan= 
        "2" 
        >G 
       
        </table>

另外，样式表设计人员还能够用:nth-column和:nth-last-column来设计单元格。

这两种状况下，若是一个单元格横跨多列，它能够匹配这些列中任意一个选择器。

: PLACEHOLDER-SHOWN

选择器规范里还添了一个:placeholder-shown，当且仅当placeholder 属性文本可见时，它将会匹配一个输入的元素。

:ANY-LINK

另外一个小小的改变就是:any-link，它的做用就是匹配任何:link和:visited可匹配的内容。

 
        // 至关于： 
       
        //    a:link, a:visited { ... }  
       
        a:any-link { ... }

结论

CSS4中的选择器尚在研究之中，不过咱们看到，已有不少有用的选择器为开发人员提供了新的模式和工具，方便他们的设计。规范中也有其余新的选择器，他们的访问、有效性检验和样式范围界定等概念文中并无提到。

若是你想试验一下这些选择器，你得等到可兼容的浏览器出现，或是尝试一下早期的版本，如:moz-any和:webkit-any的做用和:matches就相同，WebKit早期就支持:nth-child选择器。

由于这是笔者的草案，伪类的名字可能会发生改变。要获取更多内容，请留意CSS 4选择器规范。

若有建议可在Twitter 上 @mmastrac让我知道。