CSS3选择器归类整理附CSS优先级要点.pdfVIP

CSS3选择器归类整理 （附CSS优先级要点） CSS是⽤于⽹页设计可⽤的最强⼤的⼯具之⼀。使⽤它我们可以在⼏分钟内改变⼀个 ⽹站的 ⾯，⽽不⽤改变页⾯的标签。在深⼊研究CSS选择器之前，我们应该先搞懂 CSS优先级是如何⼯作的。⽐如给⼀个p标签增加⼀个类 （class ），可是执⾏后该class 中的有些属性并没有起作⽤。通过Firebug查看，发现没有起作⽤的属性被覆盖了。这 个时候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优先级； 如果两个选择器有同样的优先级，在样式表中后⾯的那个起作⽤。 让我们看⼏个例⼦，这样或许⽐较容易理解些： #sidebar h2 — 0 , 1, 0 , 1 h2.title — 0 , 0 , 1, 1 h2 + p — 0 , 0 , 0 , 2 #sidebar p first-line — 0 , 1, 0 , 2 在下⾯的例⼦中，第⼀个将会起作⽤，因为它⽐第⼆个优先级⾼： #sidebar p#first { color red; } — 0 , 2, 0 , 1 #sidebar p first-line { color blue; } — 0 , 1, 0 , 2 ⾄少基本理解优先级是如何⼯作的是很重要的，但是⼀些⼯具⽐如Firebug ，在我们审 查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元 素上哪个选择器是有效的是很有⽤的，让你⾮常容易的看到那个选择器作⽤于⼀个元 素上了。 CSS3 选择器分类 CSS3选择器分类如下图所⽰： 选择器的语法 1，基本选择器语法 选择器 类型 功能描述 通配选择 * 选择⽂档中所以HTML元素 器 E 元素选择 选择指定类型的HTML元素 器 #id ID选择器 选择指定ID属性值为“id”的任意类型元素 选择指定class属性值为“class”的任意类型的任意多个 .class 类选择器 元素 群组选择 selector 1,selectorN 将每⼀个选择器匹配的元素集合并 器 2 ，层次选择器语法 选择 类型 功能描述 器 E F 后代选择器 （包含选择 选择匹配的F元素，且匹配的F元素被包含在匹配的E 器） 元素内 选择匹配的F元素，且匹配的F元素所匹配的E元素的 EF ⼦选择器 ⼦元素 选择匹配的F元素，且匹配的F元素紧位于匹配的E元 E+F 相邻兄弟选择器 素的后⾯ 选择匹配的F元素，且位于匹配的E元素后的所有匹配 E~F 通⽤选择器