原文:征服高级CSS选择器
译自:Taming Advanced CSS Selectors
版权所有,转载请注明出处,多谢!!
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。
避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于指定的元素而不用使用额外的class或id,而且通过这种方式也可以让我们的代码和样式更加灵活。
CSS的优先级
在深入研究高级CSS选择器领域之前,理解CSS优先级是如何工作的是很重要的,这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题
当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器,我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。
那么你如何计算指定选择器的优先级?如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1
- 第一个数字(a)通常就是0,除非在标签上使用style属性;
- 第二个数字(b)是该选择器上的id的数量的总和;
- 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (
.example
) 和属性选择器(比如 li[id=red]
); - 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像
:first-line
等); - 通用选择器(*)是0优先级;
- 如果两个选择器有同样的优先级,在样式表中后面的那个起作用。
- 阅读完整内容 -