微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2015-02-23 17:20 前端大全
点击上方蓝字↑↑↑,轻松关注哦~

是下一代CSS选择器规范,上一个版本在起草多年后于2011年提出。


那么,这一版本的新东西有哪些呢?


选择器配置文件


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


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


:HAS


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


// 有一个头元素的任何部分

section:has(h1, h2, h3, h4, h5, h6)


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


// 侧边栏和五个子类

div.sidebar

:has(*:nth-child(5)) // 拥有第5个子类

:not(:has(*:nth-child(6))) // 但不具有第6个子类


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


// 匹配一个全是图像的段落

:has(img) // 拥有一个图像

:not(:has(:not(img))) //所有内容均是图像


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


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


:MATCHES


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


它的用处是,对一个类似笛卡尔积(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(2n of [disabled])


:NOT()


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


// 相当于:

// :not(h1):not(h2):not(h3)...

:not(h1, h2, h3, h4, h5, h6)


后代结合符(>>)


早期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让我知道。


相关文章


  • 使用CSS3的:nth-child发明新的选择器 2015年1月9日

  • 我们为何满意AppEngine(而非其他) 2010年11月23日

  • PubSubHubbub vs. rssCloud 2009年9月7日

  • Fedora Core 3:在chroot监禁环境下运行CVS 2004年11月14日



原文出处:grack.com

译文出处:伯乐在线 - 木木的乔安娜



/////////////////


1. 『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,欢迎关注。微信号:FrontDev

(长按二维码↑↑↑自动可扫描)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 为什么高端人才会使用「拍卖」来选工作? 大数据产业通讯录V1.0发布(220人)(2015年12月1日) 如何理解CSS的display属性 9点1氪:聚美优品股价创新低;曝华为进军 PC 业务 微软对 Ubuntu Bash on Windows 进行了“巨大改进”,支持 Tmux