CSS选择符

1、element element 

例子,div p

选择<div>元素内部的所有<p>元素

2、element > element

例子,div > p

选择父元素为<div>元素的所有<p>元素

3、element + element

例子,div + p

选择紧接在<div>元素的所有<p>元素

4、[attribute]

例子,[target]

选择带有target 属性的所有元素

5、[attribute=value]

例子,[target=_blank]

选择target="_blank"的所有元素

6、[attribute~=value]

例子,[title~=flower]

选择title属性包含单词“flower”的所有元素

7、[attribute|=value]

例子,[lang|=en]

选择lang属性值以“en”开头的所有元素

8、:link

例子,a:link

选择所有未被访问的链接

9、:visited

例子,a:visited

选择所有已被访问的链接

10、:active

例子,a:active

选择活动链接

11、:first-letter

例子,p:first-letter

选择每个<p>元素的首字母

12、:first-line

例子,p:first-line

选择每个<p>元素的首行

13、:first-child

例子,p:first-child

选择属于父元素的第一个子元素的每个<p>元素

14、element1~element2

例子,p~ul

选择前面有<p>元素的每个<ul>元素

15、[attribute^=value]

例子,a[src^="https"]

选择其sec属性值以“https”开头的每个<a>元素

16、[attribute$=value]

例子,a[src$=".pdf"]

选择其src属性值以“.pdf”结尾的所有<a>元素

17、[attribute*=value]

例子,a[src*="abc"]

选择其src属性中包含“abc”子串的每个<a>元素

18、:first-of-type

例子,p:first-of-type

选择属于其父元素的首个<p>元素

19、:last-of-type

例子,p:last-of-type

选择属于其父元素的最后<p>元素

20、only-of-type

例子,p:only-of-type

选择属于其父元素唯一的<p>元素

21、:only-child

例子,p:only-child

选择属于其父元素的唯一子元素的<p>元素

22、:nth-child(n)

例子,p:nth-child(2)

选择属于其父元素的第二个子元素的<p>元素

23、:nth-last-child(n)

例子,p:nth-last-child(2)

同上,从最后一个子元素开始计数

24、:nth-of-type(n)

例子,p:nth-of-type(2)

选择属于其父元素第二个<p>元素

25、:nth-last-of-type(n)

例子,p:nth-last-of-type(2)

同上,但是从最后一个子元素开始计数

26、:last-child

例子,p:last-child

选择属于其父元素最后一个子元素<p>元素

27、:root

选择文档的根元素

28、:empty

例子,p:empty

选择没有子元素的每个<p>元素(包括文本节点)

29、:target

例子,#new:target

选择当前活动的#news元素

30、:enabled

例子,input:enabled

选择每个启用的<input>元素

31、:disable

例子,input:disable

选择每个禁用的<input>元素

32、:dhecked

例子,input:checked

选择每个被选中的<input>元素

33、:not(selector)

例子,:not(p)

选择所有非<p>元素

34、::selection

选择被用户选取的元素部分

实例:

1、选择div下偶数span的子元素

div:nth-child(2n)

选择div下奇数span的子元素

div:nth-child(2n+1)

原文地址:https://www.cnblogs.com/haishen/p/9626583.html