选择器 | 含义 | CSS版本 | 优先级 |
* | 通用元素选择器,匹配任何元素 | 2 | 0,0,0,0 |
E | 标签(元素)选择器,匹配全部使用E标签的元素 | 1 | 0,0,0,1 |
.class1 | class选择器,匹配全部class属性中包含class1的元素 | 1 | 0,0,1,0 |
#id1 | id选择器,匹配全部id属性中等于id1的元素 | 1 | 0,1,0,0 |
其中,0,1,0,0
中的第一位表示是不是内联的意思,是则为1,不是为0css
选择器 | 含义 | CSS版本 | 优先级 |
E,F | 群组选择器,同时匹配E,F元素,元素之间用, 隔开 |
1 | 权重相加 |
E F | 后代元素选择器,匹配全部属于E元素后代的F元素,元素之间用空格隔开 | 1 | 权重相加 |
E>F | 子元素选择器,匹配全部E元素的子元素F | 2 | 权重相加 |
E+F | 相邻同胞选择器,匹配全部紧随E元素以后的同级F元素 | 2 | 权重相加 |
E~F | 同级元素通用选择器,匹配任何在E元素以后的同级F元素 | 3 | 权重相加 |
选择器 | 含义 | CSS版本 | 优先级 |
E[attr] | 匹配全部具备attr属性的E元素 | 2 | 0,0,1,0 |
E[attr=val] | 匹配全部attr属性等于"val"的E元素 | 2 | 0,0,1,0 |
E[attr~=val] | 匹配全部attr属性具备多个空格分隔的值,其中一个值等于"val"的E元素 | 2 | 0,0,1,0 |
E[attr¦=val] | 匹配全部attr属性具备多个连字号(-)分隔的值,其中一个值以"val"开头的E元素 | 2 | 0,0,1,0 |
E[attr^="val"] | 属性attr的值以"val"开头的元素 | 3 | 0,0,1,0 |
E[attr$="val"] | 属性attr的值以"val"结尾的元素 | 3 | 0,0,1,0 |
E[attr*="val"] | 属性attr的值包含"val"字符串的元素 | 3 | 0,0,1,0 |
选择器 | 含义 | CSS版本 | 优先级 |
E:link | 匹配全部未被点击的连接 | 1 | 0,0,1,0 |
E:visited | 匹配全部已被点击的连接 | 1 | 0,0,1,0 |
E:active] | 匹配鼠标已经激活尚未释放的E元素 | 1 | 0,0,1,0 |
E:hover | 匹配鼠标悬停其上的E元素 | 1 | 0,0,1,0 |
E:lang(language) | 匹配lang属性等于language | 2 | 0,0,1,0 |
E:focus | 匹配得到当前焦点的E元素 | 2 | 0,0,1,0 |
E:first-child | 匹配父元素的第一个子元素 | 2 | 0,0,1,0 |
CSS3中伪类,好比:hover
写为::hover
,这是为了与伪元素做区分,为了支持旧版的网站,之前的单引号伪类还有效浏览器
选择器 | 含义 | CSS版本 | 优先级 |
E:enabled | 匹配表单中激活的元素 | 3 | 0,0,1,0 |
E:disabled | 匹配表单中禁用的元素 | 3 | 0,0,1,0 |
E:checked | 匹配得到当前焦 | 3 | 0,0,1,0 |
选择器 | 含义 | CSS版本 | 优先级 |
E:root | 匹配文档的根元素,对于HTML文档,就是HTML元素 | 3 | 0,0,1,0 |
E:nth-child(n) | 匹配其父元素的第n个子元素,第一个编号为1 | 3 | 0,0,1,0 |
E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1 | 3 | 0,0,1,0 |
E:nth-of-type(n) | 与:nth-child()做用相似,可是仅匹配使用同种标签的元素 | 3 | 0,0,1,0 |
E:nth-last-of-type(n) | 与:nth-last()做用相似,可是仅匹配使用相同标签的元素 | 3 | 0,0,1,0 |
E:last-child | 匹配父元素的最后一个子元素,等同于:nth-last-child(1) | 3 | 0,0,1,0 |
E:first-of-type | 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) | 3 | 0,0,1,0 |
E:last-of-type | 匹配父元素下使用同种元素的最后一个子元素,等同于:nth-last-of-type(1) | 3 | 0,0,1,0 |
E:only-child | 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或:nth-child(1):nth-last-child(1) | 3 | 0,0,1,0 |
E:only-of-type | 匹配父元素下使用同种标签的惟一一个子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1) | 3 | 0,0,1,0 |
E:empty | 匹配一个不包含任何子元素的元素,注意,文本借点也被看做子元素 | 3 | 0,0,1,0 |
选择器 | 含义 | CSS版本 | 优先级 |
E:not(selector) | 匹配非当前选择起的任何元素 | 3 | 0,0,0,0 |
选择器 | 含义 | CSS版本 | 优先级 |
E:target | 匹配文档中特定"id"点击后的效果 | 3 | 0,0,1,0 |
选择器 | 含义 | CSS版本 | 优先级 |
E:first-line | 匹配E元素的第一行 | 2 | 0,0,0,1 |
E:first-letter | 匹配E元素的第一个字母 | 2 | 0,0,0,1 |
E:before | 在E元素以前插入生成的内容 | 2 | 0,0,0,1 |
E:after | 在E元素以后插入生成的内容 | 2 | 0,0,0,1 |
E::selection | 匹配用户当前选中的元素 | 3 | 0,0,0,1 |
E::placeholder | 控制表单输入框占位符的外观,浏览器暂时不支持 | 3 | 0,0,0,1 |
暂略网站
Selectors Level 4
Selectors Level 4草案
CSS4 Rocksurl
浏览器经过优先级
来判断哪一些属性应该应用到一个元素上.优先级就是分配给指定的CSS声明的一个权重
,它由匹配的选择器中的每个选择器类型的值来决定.code
选择器的权重(特殊性)升序排列:orm
继承排序
通用元素继承
标签|伪元素ci
类|属性|伪类文档
ID
内联样式
!important
全部的选择器权重都是经过相加计算,大的优先;若是权重同样大,后定义的优先.
此外,优先级还要考虑到CSS样式的来源,样式表可能有三种不一样的来源:做者,用户和客户端,按升序排列:
客户端声明(UA declarations)
通常用户声明(user normal declarations)
通常做者声明( author normal declarations )
加了 '!important' 的做者声明( author important declarations )
加了 '!important' 的用户声明( user important declarations )
当拥有相同重要性和来源,按照CSS特殊性来排序.引用的样式表(@import )中的规则被认为出如今样式表自己的全部规则以前,在@charset
以后
<style> @charset "UTF-8"; @import url("userContent.css"); p { color: green !important; } </style>
使用!important
能够覆盖任何其它没有使用!important
的规则,在IE6时代!important
多用来hack,不过如今不建议使用,除非须要在外部css文件中提高优先级
这里明显能够看出,:not
不参与权重计算
因而可知,属性选择器里面的选择器不参与权重计算,它的权重只是属性选择器的权重
对于后代元素选择器来讲,祖先选择器跟每一个后代元素的距离都是同样的.在这个例子中,因为优先级同样,因此后面的.red p
覆盖前面的.green p
覆盖以前:
1.颜色是? 绿色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色
覆盖以后:
1.颜色是? 红色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色
相关参考:
优先级
KB005: CSS 层叠