AJax技术

爱上朴实的CSS细节(2)

字号+ 作者:H5之家 来源:H5之家 2015-11-19 14:36 我要评论( )

现在,通过设定:last-child作为否定伪类的参数,就可以把最后一个元素排除,这样少了一行代码,从而更加的简洁和易维护。 li { color: #00F; }li:nth-child(odd):not(:last-child) { color: #F00; } 否定伪类看起来

  现在,通过设定:last-child作为否定伪类的参数,就可以把最后一个元素排除,这样少了一行代码,从而更加的简洁和易维护。

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

  否定伪类看起来并没有什么惊人之处,你可以不用它,但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中,优势还是挺明显的。说实话,它是我最喜欢的伪类之一。

  是的,我有最喜欢的伪类。

  在本文提到的特性当中,否定伪类是兼容性最好的,它被IE9+和高级浏览器支持(不需要加浏览器产商前缀)。如果你熟悉jQuery,你可能习惯用它——版本1.0开始就有了,以及相似的not()方法。

  “适用于”伪类

  :matches()伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了!但是,它能做什么?

  :matches()伪类最强大的地方就是聚合多行选择器。例如,要选择父容器里面其中几个不同子容器里面的p元素,在这之前,代码或许会写成这样:

.home header p, .home footer p, .home aside p { color: #F00; }

  有了:matches()伪类,就可以把共同点提取出来,缩减代码量。该例子里面,选择器的共同点是以home为起点、以p为终点,所以可以用:matches()把中间的所有元素集合起来。是不是有些困惑?看看代码就明白了:

.home :matches(header,footer,aside) p { color: #F00; }

  这其实是CSS4的一部分(确切地说,是CSS选择器第四等级),这份规范文档还提到将会有类似的语法(以逗号隔开的复合选择器)应用于:not()伪类。兴奋ing!

  目前,:matches()可以在Chrome和Safari浏览器中运行,但是要加上前缀-webkit-,Firefox也支持,但是要按照旧的写法:any(),同时要加上-moz-前缀。

  你爱上这些朴实的CSS细节了吗?

  这篇文章讲到的特性,最赞的一点是它们解决了现实的问题,从琐碎而繁复的选择器到建立响应式网站的新挑战。实际上,我期待每一个特性被使用到最普通的项目当中。

  新特性如滤镜可能很直观很华丽,但是我更愿意发现隐藏在深处的实用小技巧。

  在积极探索的过程中,每一个特性可以让你的职业生涯更顺利——想到这里,就不会觉得繁琐了。

文章来自:Learning to Love the Boring Bits of CSS

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 爱上编程技术博客

    爱上编程技术博客

    2015-11-24 12:09

  • 爱上学习 我赢职场

    爱上学习 我赢职场

    2015-10-16 17:26

网友点评
8