一.选择器语法及其意义(pattern and meaning)
Pattern | Meaning | CSS level |
---|---|---|
E | an element of type E 标记选择器,匹配所有标签名为E的元素 |
1 |
E:link E:visited |
an E element being the source anchor of a hyperlink
of which the target is not yet visited (:link) or already visited (:visited) 伪类,匹配未访问链接与已访问链接 |
1 |
E::first-line | the first formatted line of an E element 首行伪元素,匹配元素E的第一行内容 需要注意的是:第一行的长度取决于容器的大小和字体大小等等,并不是匹配第一个句号;除此之外,first-line伪元素会受到before/after伪元素的影响 P.S.IE6不支持(单冒号也不支持) |
1 |
E::first-letter | the first formatted letter of an E element 首字母伪元素,匹配元素E的第一个字母 需要注意的是:同上 P.S.IE6不支持(单冒号也不支持) |
1 |
E.warning | an E element whose class is “warning” (the
document language specifies how class is determined). 类选择器,匹配class属性是warning的E元素 P.S.类选择器.attr等价于.attr,所以列表中没有.attr |
1 |
E#myid | an E element with ID equal to “myid”. ID选择器,匹配id属性是myid的E元素 P.S.类选择器#myid等价于#myid,所以列表中没有#myid |
1 |
E F | an F element descendant of an E element 后代选择器,匹配被E元素包裹着的F元素 |
1 |
E:active E:hover E:focus |
an E element during certain user actions 伪类,分别匹配处于激活状态,鼠标悬停状态,持有焦点状态的E元素 P.S.注意LVHA爱恨原则,a标签的激活状态就是鼠标按下不抬起 |
1 and 2 |
* | any element 通配选择器,匹配所有元素 |
2 |
E[foo] | an E element with a “foo” attribute 属性选择器,匹配声明了属性名为foo的E元素 |
2 |
E[foo=”bar”] | an E element whose “foo” attribute value is
exactly equal to “bar” 属性选择器,匹配声明了属性名为foo且值为bar的E元素 |
2 |
E[foo~=”bar”] | an E element whose “foo” attribute value is
a list of whitespace-separated values, one of which is exactly equal to
“bar” 属性选择器,匹配声明了属性名为foo且值列表中包含bar的E元素 P.S.例如foo=”value1 bar value2” |
2 |
E[foo|=”en”] | an E element whose “foo” attribute has a
hyphen-separated list of values beginning (from the left) with “en” 属性选择器,匹配声明了属性名为foo且值为以独立en开头的E元素(连字符隔开的) P.S.需要注意的是如果存在E1foo=”en”,E2foo=”en-x”,E3foo=”enxx”,E4foo=”enxxx”,那么匹配结果是E1和E2,与^=选择器不同 |
2 |
E:first-child | an E element, first child of its parent 结构化伪类,匹配E的父元素的第一个孩子 P.S.先数,再筛类型 |
2 |
E:lang(fr) | an element of type E in language “fr” (the
document language specifies how language is determined) 伪类,表示语言是法语(body的lang属性值为fr)匹配body内的所有元素(继承) P.S.用于为不同的语言环境指定样式,比如某些国家的引号并不是” |
2 |
E::before | generated content before an E element 伪元素,在E标签前面添加内容(只能添加文本,不能添加标记) P.S.IE6不支持 |
2 |
E::after | generated content after an E element 伪元素,在E标签后面添加内容(只能添加文本,不能添加标记) P.S.IE6不支持 |
2 |
E > F | an F element child of an E element 子选择器,匹配作为E的直接孩子的F元素(不包括孙子) P.S.IE6不支持 |
2 |
E + F | an F element immediately preceded by an E element 相邻兄弟选择器,匹配紧跟在E后面的F元素 |
2 |
E[foo^=”bar”] | an E element whose “foo” attribute value
begins exactly with the string “bar” 子串匹配属性选择器,匹配声明了属性名为foo且值以bar开头的E元素 |
3 |
E[foo$=”bar”] | an E element whose “foo” attribute value
ends exactly with the string “bar” 子串匹配属性选择器,匹配声明了属性名为foo且值以bar结尾的E元素 |
3 |
E[foo*=”bar”] | an E element whose “foo” attribute value
contains the substring “bar” 子串匹配属性选择器,匹配声明了属性名为foo且值包含bar的E元素 |
3 |
E:root | an E element, root of the document 结构化伪类,匹配根元素(一般是html标签) P.S.IE6不支持 |
3 |
E:nth-child(n) | an E element, the n-th child of its parent 结构化伪类,匹配E的父元素的第n个孩子且要求该孩子类型为E,如果不是则匹配失败(n的值是从1开始,2n和2n+1分别表示第偶数个和第奇数个,等价于even和odd,n表示所有孩子,-n + 2表示前两个孩子) P.S.IE6不支持,先数,再筛类型 |
3 |
E:nth-last-child(n) | an E element, the n-th child of its parent, counting
from the last one 结构化伪类,匹配E的父元素的倒数第n个孩子且要求该孩子类型为E,如果不是则匹配失败,n的取值同上 P.S.IE6不支持,先数,再筛类型 |
3 |
E:nth-of-type(n) | an E element, the n-th sibling of its type 结构化伪类,匹配E的父元素的第n个E类型的孩子 P.S.IE6不支持,先筛类型,再数 |
3 |
E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting
from the last one 结构化伪类,匹配E的父元素的倒数第n个E类型的孩子(同上) P.S.IE6不支持,先筛类型,再数 |
3 |
E:last-child | an E element, last child of its parent 结构化伪类,匹配E的父元素的最后一个孩子 P.S.IE6不支持,先数,再筛类型 |
3 |
E:first-of-type | an E element, first sibling of its type 结构化伪类,匹配E的父元素的第一个E类型的孩子 P.S.IE6不支持,先筛类型,再数 |
3 |
E:last-of-type | an E element, last sibling of its type 结构化伪类,匹配E的父元素的最后一个E类型的孩子 P.S.IE6不支持,先筛类型,再数 |
3 |
E:only-child | an E element, only child of its parent 结构化伪类,匹配E的父元素的惟一一个孩子且要求该孩子类型为E P.S.IE6不支持,先数(确定“独生子女”),再筛类型 |
3 |
E:only-of-type | an E element, only sibling of its type 结构化伪类,匹配E的父元素的惟一一个E类型的孩子 P.S.IE6不支持,先筛类型,再数(确定“独生子女”) |
3 |
E:empty | an E element that has no children (including text
nodes) 结构化伪类,匹配E类型的空元素(没有任何孩子,包括文本节点) P.S.IE6不支持 |
3 |
E:target | an E element being the target of the referring URI 伪类,表示页内跳转目标位置 P.S.IE6不支持 |
3 |
E:enabled E:disabled |
a user interface element E which is enabled or
disabled UI元素状态伪类,匹配处于有效状态和失效状态的E元素 P.S.IE6不支持 |
3 |
E:checked | a user interface element E which is checked (for
instance a radio-button or checkbox) 伪类,匹配处于选中状态的radio和checkbox(可自定义的样式很少) P.S.IE6不支持 |
3 |
E:not(s) | an E element that does not match simple selector s 取反伪类,匹配对s选择器匹配结果的补集中的E元素,例如span:not(:empty)匹配所有非空的span P.S.IE6不支持,不能嵌套使用,而且参数s不能指定类型,默认与E的类型相同,也就是说span:not(span:empty)是不合法的 |
3 |
E ~ F | an F element preceded by an E element 一般相邻选择器,匹配跟在E后面的所有F元素 |
3 |
二.选择器语法的大小写敏感性(case-sensitivity)
选择器语法不是大小写敏感的(case-insensitive),a:hover等价于a:HOVER,但标签名和属性名以及属性值是大小写敏感的(取决于HTML,必须保持一致)
三.选择器的分类
- type selector——类型选择器(标记选择器)
- universal selector——通配选择器
- attribute selector——属性选择器
- class selector——类选择器
- ID selector——ID选择器
- pseudo-class——伪类
四.pseudo-class伪类与pseudo-element伪元素的区别
- 形式上,伪类有一个冒号,而伪元素有两个冒号
- 意义上,伪类相当于给现有元素添加了class属性值,而伪元素相当于创建了一个新的元素(p:first-child匹配p的第一个子元素,相当给第一个子元素设置了匿名class;p::first-line匹配段落第一行内容,相当于创建了一个span)
特别的,伪类要遵循LVHA爱恨原则;before, after不是伪类而是伪元素(最容易混淆,原因是浏览器兼容问题——某些浏览器不支持双冒号)
五.选择器特殊性(specificity)的计算
特殊性高的样式会覆盖特殊性低的样式,比如:#cnblogspost_body > p{/*style1*/}和p{/*style2*/}共存时,表现出来的是特殊性更高的style1,特殊性的计算规则如下:
a = ID选择器的个数
b = (类选择器 + 属性选择器 + 伪类)的个数
c = (标记选择器 + 伪元素)的个数
P.S.1.忽略通配选择器
P.S.2.取反选择器不算数(取反选择器本身不计入伪类的个数,但左右的都算),例如#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
P.S.3.重复出现相同的简单选择器都算有效计数