CSS选择器分类总结

时间:2022-02-15 21:50:49

一.选择器语法及其意义(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=”en_xx”,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,必须保持一致)

三.选择器的分类

  1. type selector——类型选择器(标记选择器)
  2. universal selector——通配选择器
  3. attribute selector——属性选择器
  4. class selector——类选择器
  5. ID selector——ID选择器
  6. pseudo-class——伪类

四.pseudo-class伪类与pseudo-element伪元素的区别

  • 形式上,伪类有一个冒号,而伪元素有两个冒号
  • 意义上,伪类相当于给现有元素添加了class属性值,而伪元素相当于创建了一个新的元素(p:first-child匹配p的第一个子元素,相当给第一个子元素设置了匿名class;p::first-line匹配段落第一行内容,相当于创建了一个span)

特别的,伪类要遵循LVHA爱恨原则;before, after不是伪类而是伪元素(最容易混淆,原因是浏览器兼容问题——某些浏览器不支持双冒号)

五.选择器特殊性(specificity)的计算

特殊性高的样式会覆盖特殊性低的样式,比如:#cnblogs_post_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.重复出现相同的简单选择器都算有效计数

参考资料:

官方文档:http://www.w3.org/TR/css3-selectors/