扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >CSS选择器 4 中包括了哪些新东西?

CSS选择器 4 中包括了哪些新东西?

为了部落发布于 2017-11-15 09:41查看:5431回复:1

     选择器配置文件

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

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

     :HAS

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

image.png

        或者开发人员可以匹配只包含一定数量图片的段落:

image.png

        甚至可以匹配包含特定子类数量的元素(本例有5个):

image.png

        警告:此时:has选择器并没有想象中的快速,这表明它不能在样式表中使用。由于目前还没有人实现这个选择器,它的性能特征还尚待研究。如果浏览器跟得上的话,它很快就能用于一般样式了。

        早期版本的规范会在主题旁添加一个感叹号(!)表示警告,不过现在没有了。


     :MATCHES

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

        它的用处是,对一个类似笛卡尔积(Cartesian-product-esque)的SCSS/SASS输出进行整理,比如下面这段:

image.png

        可以输出为下面这种更便于维护的样式:

image.png

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

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

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

image.png

        选择器S用于确定索引,它独立于伪类左边的选择器。如规范中提到的,如果你提前知道了元素的的类型,就可以将:nth-of-type选择器转化为:nth-child(… of S),如:

image.png

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

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

image.png

     :NOT()

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

image.png

        

    后代结合符(>>)

        早期CSS中,后代选择符的作用是一段()空间,不过现在作用更加明显:

image.png

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

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

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

        通过使用新的列组合符(||),你可以用<col>标记表中的相同列,然后对该列中的单元格进行设计:

image.png

        另外,样式表设计人员还可以用:nth-column和:nth-last-column来设计单元格。

        这两种情况下,如果一个单元格横跨多列,它可以匹配这些列中任意一个选择器。

     : PLACEHOLDER-SHOWN

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

     :ANY-LINK

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

image.png


收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: