css选择器总结
2016-04-07 15:23
696 查看
CSS优先级(从低到高):
1、*
2、元素(div)| 伪元素
3、class | 属性 | 伪类
4、id
5、行内<style...>
6、!important
注: 当权重相同的时候,后定义的生效
:not没有权重
![](https://images2015.cnblogs.com/blog/568270/201604/568270-20160407155108015-303760069.png)
css选择器的效率(从右到左的原则)
1、id选择器(#content)
2、类选择器(.box)
3、标签选择器(span)
4、相邻选择器(h1+p)
5、子选择器(ul>li)
6、后代选择器(ul li)
7、通配符选择器(*)
8、属性选择器(input[type="text"])
9、伪类选择器(a:hover)
参考文章:MDN的编写高效的 CSS
基本选择器
1、通配符选择器 *
2、元素选择器 如: li
3、类选择器 如:.first
4、id选择器 如:#box
5、后代选择器 如:ul li
6、子元素选择器 如:ul>li
7、相邻兄弟元素选择器 如:li+li
8、通用兄弟选择器 如:.active ~ li(li.active 元素后面的所有兄弟元素li)
9、群组选择器 如: .first,.last{}
属性选择器
1、E[attr]
2、E[attr="value"] E[attr~="value"] E[attr*="value"]
区别:
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
a[title="website"]
a[title~="website"] 匹配上
a[title~="web"] 匹配不上 ,若要匹配上:a[title*="web"]
3、E[attr^="value"] 开头 E[attr$="value"] 结尾
如:
a[href^="http://"],第一个匹配
a[href$="png"]
4、E[attr|="value"],等于value或以value-开头的所有元素
如:
<a href="" class="links active item" title="test websited" target="_blank" lang="zh">1</a>
<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">2</a>
<a href="" class="links item" title="close the website" lang="en-zh">3</a>
a[lang|="zh"] 1和2被匹配
伪类选择器
1、:link-->:visited-->:hover-->:active
2、form表单:
:enable :disabled
:checked
3、
:first-child :first-of-type
:last-child :last-of-type
:nth-child() :nth-of-type()
:nth-last-child() :nth-last-of-type()
:only-child() :only-of-type()
:empty()
:not() =>比如:input元素排除submit,可以这么写 input:not[type="submit']
4、伪元素
:first-line
:first-letter
:before :after
::selection
参考文章:
CSS3选择器:nth-child和:nth-of-type之间的差异
CSS3 选择器——伪类选择器
1、*
2、元素(div)| 伪元素
3、class | 属性 | 伪类
4、id
5、行内<style...>
6、!important
注: 当权重相同的时候,后定义的生效
:not没有权重
![](https://images2015.cnblogs.com/blog/568270/201604/568270-20160407155108015-303760069.png)
css选择器的效率(从右到左的原则)
1、id选择器(#content)
2、类选择器(.box)
3、标签选择器(span)
4、相邻选择器(h1+p)
5、子选择器(ul>li)
6、后代选择器(ul li)
7、通配符选择器(*)
8、属性选择器(input[type="text"])
9、伪类选择器(a:hover)
参考文章:MDN的编写高效的 CSS
基本选择器
1、通配符选择器 *
2、元素选择器 如: li
3、类选择器 如:.first
4、id选择器 如:#box
5、后代选择器 如:ul li
6、子元素选择器 如:ul>li
7、相邻兄弟元素选择器 如:li+li
8、通用兄弟选择器 如:.active ~ li(li.active 元素后面的所有兄弟元素li)
9、群组选择器 如: .first,.last{}
属性选择器
1、E[attr]
2、E[attr="value"] E[attr~="value"] E[attr*="value"]
区别:
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
a[title="website"]
a[title~="website"] 匹配上
a[title~="web"] 匹配不上 ,若要匹配上:a[title*="web"]
3、E[attr^="value"] 开头 E[attr$="value"] 结尾
如:
a[href^="http://"],第一个匹配
a[href$="png"]
4、E[attr|="value"],等于value或以value-开头的所有元素
如:
<a href="" class="links active item" title="test websited" target="_blank" lang="zh">1</a>
<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">2</a>
<a href="" class="links item" title="close the website" lang="en-zh">3</a>
a[lang|="zh"] 1和2被匹配
伪类选择器
1、:link-->:visited-->:hover-->:active
2、form表单:
:enable :disabled
:checked
3、
:first-child :first-of-type
:last-child :last-of-type
:nth-child() :nth-of-type()
:nth-last-child() :nth-last-of-type()
:only-child() :only-of-type()
:empty()
:not() =>比如:input元素排除submit,可以这么写 input:not[type="submit']
4、伪元素
:first-line
:first-letter
:before :after
::selection
参考文章:
CSS3选择器:nth-child和:nth-of-type之间的差异
CSS3 选择器——伪类选择器
相关文章推荐
- 样式设置
- 通过原生js添加div和css
- Sass编译Css
- css Masks
- 前端学习笔记03,CSS
- 去除chrome浏览器自动添加的默认样式
- CSS制作图形变形弹出效果的示例分享
- 针对IE浏览器单独写CSS样式的几种方法
- 探究CSS box-shadow属性
- 浅谈CSS3 Filter的10种特效
- Css制作table细线表格
- 用CSS画网格线,在IE中
- css兼容性写法
- grunt前端打包——css篇
- CSS引用方式
- CSS中盒子的浮动定位
- CSS 的命名和书写
- CSS 的命名和书写
- 书单(二)Head First HTML与CSS、XHTML(中文版).pdf
- CSS选择器中first-child和first-of-type的区别