CSS 选择器使用指南

CSS 最基本的选择器是元素选择器(比如 div)，id 选择器(比如 #id1)，类选择器(比如 .class_name)。 其他不常见的选择器包括伪类选择器 (:hover)，复杂的 CSS3 和正则选择器，比如：first-child，class ^= “grid-”。 # CSS 选择器效率从高到低的排序如下 id选择器: #myid 类选择器: .myclassname 标签选择器: div,h1,p 相邻选择器: h1+p 子选择器: ul > li 后代选择器: li a 通配符选择器: * 属性选择器: a[rel="external"] 伪类选择器: a:hover, li:nth-child # 如何写出简洁、高效的CSS选择器 **不要在ID选择器前使用标签名** 一般写法：DIV#divBox 更好写法：#divBox 解释： 因为ID选择器是唯一的，加上 div 反而增加不必要的匹配 **不要再class选择器前使用标签名** 一般写法：span.red 更好写法：.red 同id选择器，但如果你定义了多个 .red，而且在不同的元素下是样式不一样，则不能去掉 **尽量少使用层级关系** 一般写法：#divBox p .red{color:red;} 更好写法：.red{..} **使用class代替层级关系** 一般写法：#divBox ul li a{display:block;} 更好写法：.block{display:block;}