写页面时有时经常为了class/id命名苦恼,有时候还会因为疏忽两个名字一样而出现冲突问题,不过这段时间找到了几个好的方法(虽然以前也用过,但没有发现她的重要性):
-
属性选择器:
语法:div [attr=value]
主要有六种属性使用方法:
1. [attr=value] 选择属性为value的元素
1 2 3 4 5 6 7 |
/*选择class-name中input 的type为text的元素*/ .class-name input[type="text"] { width: 300px; } |
2. [attr|=”value”] 选择已该值开头的元素,必须时整个单词。例如btn-default,[attr|=”btn”]既可选择该元素在内。
3. [attr~=”value”] 选取属性中包含value词汇的元素,value必须时单独词汇(空格分隔)
4. [attr$=”value”] 属性中包含value不管位置
5. [attr^=”vlaue”] 以value开头的值
6. [attr*=”value”] 以value结束的值
1 2 3 4 5 6 7 |
/*所有含有btn的class元素被选中*/ [class="btn"]{ color: red; } |
但是有利就有弊:safari和webkit的架构师David Hyatt的两段话:
- 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。
- 如果你非常在意页面的性能那千万别使用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. 子元素选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*选择改变所有.abc里面span的字体大小*/ .abc span { font-size: 14px; } /*只选择第一代的子元素大小 ,*/ .abc > span { font-size: 14px } |
3. 兄弟选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*选择紧临的下一个兄弟元素(同一个父亲)*/ .abc + .cba { color: red; } /*选择所有的兄弟元素*/ .abc ~span { font-size: 12px; } |
4.伪类选/伪元素择器
- :hover
- :focus
- :first-child
- :first-line
- :first-letter
- :befor
- :after
PS: css3增加了更多的高级选择器,
参考