css选择器汇总

1. 选择器 .class    举例: class = "box"

使用: .box {}
描述: 选择class="box"的所有元素

2. 选择器 #id    举例: id = "box"

使用: #box {}
描述: 选择id="box"的所有元素

3. 选择器  *   举例:    

使用: * {}
描述: 选择所有元素

4. 选择器 element    举例: div

使用: div {}
描述: 选择所有<div>元素

5. 选择器 element,element    举例: div,p

使用: div,p {}
描述: 选择所有<div>元素和所有<p>元素

6. 选择器 element element    举例: div p   (和上面的区别在于这俩元素中间没有逗号)

使用: div p {}
描述: 选择<div>元素内的所有<p>元素

7. 选择器 element>element    举例: div > p

使用: div>p {}
描述: 选择父元素为<div>元素的所有<p>元素

8. 选择器 [attribute]   举例: [target] 

使用: [target] {}
描述: 选择具有target属性的所有元素

9. 选择器 [attribute=value]    举例: [target=_blank]

使用: [target=_blank] {}
描述: 选择target =“_ blank”的所有元素

10. 选择器 [attribute^=value]    举例: 

使用: a[href^="https"] {}
描述: 选择其href属性值以“https”开头的每个<a>元素

11. 选择器 [attribute$=value]   举例: a[href$=".pdf"]

使用: a[href$=".pdf"] {}
描述: 选择href属性值以“.pdf”结尾的每个<a>元素

12. 选择器 [attribute*=value]    举例: a[href*="w3schools"]

使用: a[href*="abc"] {}
描述: 选择每个<a>元素，其href属性值包含子字符串“abc”

13. 选择器 :active    举例: a标签

使用: a:active {}
描述: 选择活动链接

14. 选择器 ::after    举例: p标签

使用: p::after {}
描述: 在每个<p>元素的内容之后插入一些内容

15. 选择器 ::before    举例:  p标签

使用: p::before {}
描述: 在每个<p>元素的内容之前插入一些内容

16. 选择器 :checked    举例:  input标签

使用: input:checked {}
描述: 选择每个选中的<input>元素

17. 选择器 :disabled    举例:   input标签

使用: input:disabled {}
描述: 选择每个禁用的<input>元素

18. 选择器 :first-child    举例:  div标签内有多个p标签

使用: p:first-child {}
描述: 选择作为其父级(div)的第一个子元素的每个<p>元素 
(意思就是选择每个div父标签下的第一个p标签)

19. 选择器 :first-of-type    举例:  div标签内有多个p标签

使用: p:first-of-type {}
描述: 选择每个<p>元素，它是其父元素的第一个<p>元素

20. 选择器 :focus   举例:  input标签

使用: input:focus {}
描述: 选择具有焦点的<input>元素

21. 选择器 :hover    举例:  a标签

使用: a:hover {}
描述: 选择鼠标悬停时的链接样式

22. 选择器 :last-child    举例:  div标签内有多个p标签

使用: p:last-child {}
描述: 选择作为其父级(div)的最后一个子元素的每个<p>元素 
(意思就是选择每个div父标签下的最后一个p标签)

23. 选择器 :last-of-type    举例:  div标签内有多个p标签

使用: p:last-of-type {}
描述: 选择每个<p>元素，它是其父元素的最后一个<p>元素

24. 选择器 :link    举例:  a标签

使用: a:link {}
描述: 选择所有未访问的链接

25. 选择器 :not(selector)   举例:  有多个标签

使用: :not(p) {}
描述: 选择不是<p>元素的每个元素

26. 选择器 :nth-child(n)   举例:  div标签内有多个p标签

使用: p:nth-child(2) {}
描述: 选择作为其父级(div)的第二个子元素的每个<p>元素

27. 选择器 :nth-last-child(n)   举例:  div标签内有多个p标签

使用: p:nth-last-child(2) {}
描述: 选择每个<p>元素作为其父元素的第二个子元素，
从最后一个子元素开始计算

28. 选择器 :nth-last-of-type(n)   举例:  div标签内有多个p标签

使用: p:nth-last-of-type(2) {}
描述: 选择每个<p>元素作为其父元素的第二个<p>元素，
从最后一个子元素开始计算

29. 选择器 :nth-of-type(n)   举例: div标签内有多个p标签

使用: p:nth-of-type(2) {}
描述: 选择每个<p>元素，它是其父元素的第二个<p>元素

30. 选择器 ::selection   举例:  select标签

使用: ::selection {}
描述: 选择用户选择的元素部分

31. 选择器 :visited   举例:  a标签

使用: a:visited {}
描述: 选择所有访问过的链接