CSS选择器——了解选择器的用法

CSS选择器

1.了解CSS选择器

---

CSS选择器有很多，大家也都不陌生。那先系统的介绍一下：

1.1 *通配符选择器

经常用于css reset，清理标签的默认样式，一般不提倡直接使用，主要是会匹配所有标签，相当耗资源。

1.2 #id ID选择器
优先级高 但重用性较差

1.3 .class 类选择器
可以选择拥有类特性的多种元素 。 最常使用的一种了

1.4 X 元素选择器

1.5 X Y 后代选择器
用于选取X元素下子元素Y，要留意的是，这种方式的选择器将选取其下所有匹配的子元素，无视层级

1.6 X>Y 子选择器
只匹配X下的子元素Y。IE6不支持。

1.7 X[ title=’ ’ ] 属性选择器
不仅仅适用于title,也可以是其他属性

1.8 伪类选择器
伪类选择器有很多 主要的形式是 X： … 。
最常见的有 X：after / a:link、a:visted、a:hover、a:active等等

---

其余更多的选择器 可以戳这个链接30个你不可不知的CSS选择器

---

2. CSS选择器的效率区别

CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：
1.ID选择器 比如#header
2.类选择器 比如.promo
3.元素选择器 比如 div
4.兄弟选择器 比如 h2 + p
5.子选择器 比如 li > ul
6.后代选择器 比如 ul a 7. 通用选择器 比如 *
7.属性选择器 比如 type = “text”
8.伪-比如 a:hover

以上引用自[Steve Souders](http://steve——

---

3.CSS选择器中应尽量避免的写法

首先请阅读 编写高效的CSS选择器。这篇文章就像是在欣赏一朵花一样，讲解的十分精细和生动。

3.1 拿其中的一点来说：
例如有 .container ul li{ } ，浏览器去寻找的方式是从右到左的，即 先找到li标签 -> 找到被ul包裹的li标签 -> 找到被.container包裹的ul标签的li标签  。所以从这点出发，我们不可过度限制选择器。我们可以去掉一些不必要的选择 ，例如:
     将.container ul li 写成 .container li。因为li 标签一定在ul中。
     当.content 一定在 .main中时 。将.container .main .content 写成 .container .content

4. 总结

建议还是看几位大牛的文章，个人写的水平太差。CSS选择器的使用还是了解一下，对以后还是很有帮助的。

---