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选择器笔记

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.