css选择器

写页面时有时经常为了class/id命名苦恼，有时候还会因为疏忽两个名字一样而出现冲突问题，不过这段时间找到了几个好的方法(虽然以前也用过，但没有发现她的重要性)：

1. 属性选择器：

 语法：div [attr=value]

主要有六种属性使用方法：

1. [attr=value]    选择属性为value的元素

2. [attr|=”value”]     选择已该值开头的元素，必须时整个单词。例如btn-default，[attr|=”btn”]既可选择该元素在内。

3. [attr~=”value”]    选取属性中包含value词汇的元素，value必须时单独词汇(空格分隔）

4. [attr$=”value”]    属性中包含value不管位置

5. [attr^=”vlaue”]    以value开头的值

6. [attr*=”value”]    以value结束的值

但是有利就有弊：safari和webkit的架构师David Hyatt的两段话：

1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

css选择器的效率从高到低依次时：

1. id选择器（#myid）> 2.类选择器（.myclassname）> 3.标签选择器（div,h1,p）> 4.相邻选择器（h1+p）> 5.子选择器（ul < li）> 6.后代选择器（li a）> 7.通配符选择器（*）> 8.属性选择器（a[rel=”external”]）> 9.伪类选择器（a:hover,li:nth-child）

结果显然可知，但是个人观点：虽然有效率区分但是现在硬件什么的水平也比较高，但平时做东西，并不能将这些效率体现出来，反而命名更令人头痛。所以如果不是太过与强调选择效率。这些东西记住等到要用的时候用上就可以了。

2. 子元素选择器

3. 兄弟选择器

4.伪类选/伪元素择器

• :hover
• :focus
• :first-child
• :first-line
• :first-letter
• :befor
• :after

PS: css3增加了更多的高级选择器,

参考

伪元素使用                                                                                                                                       css选择器使用                                                                                                                                   网站CSS选择器性能讨论                                                                                                                   征服高级CSS选择器                                                                                                                       CSS选择器笔记