复习一波CSS3选择器

1. #class

id选择器 选择带有指定id的元素

• 不能以数字开头
• 不能包含特殊字符（&、@、#、$等）
• 一个id属性只能在文档中使用一次！仅一次！

2. .class

class选择器 选择带有指定类（class）的元素

• 最好不要以数字开头，以免在某些浏览器中出现问题

3. *

通配选择器 选中所有元素
两种用法：

1. 选择器选取所有元素
2. 选择器选择某个元素下的所有元素。例：选择div下的所有元素

div * {

}

4. element

标签选择器 选择指定标签的元素

5. element, element

分组选择器 用于同时选取多个元素

6. element element

后代选择器（descendant selector），又称包含选择器
div p{ /*匹配div下的p*/ /*匹配祖先元素是div的p*/ }

7. element > element

   div>p{
       /*选择父元素为div的p*/
       /*直接子元素*/   
   }
   

8. element + element

相邻兄弟选择器
div+p{ /*选择div后的p*/ /*兄弟关系*/ }

9. [attribute]

属性选择器
a[target]{ /*匹配带有target属性的a标签*/ }

10. [attribute=value]

特定属性选择器
a[target=_blank]{ /*匹配target="_blank"的a标签*/ }

11. [attribute~=value]

包含
[title~=flower]{ /*匹配title属性中包含"flower"的标签*/ }

12. [attribute|=value]

    开头

    [lang~=zh]{
        /*匹配lang属性以"zh"开头的标签*/
    }
    

    和^的区别：
    |必须是以value值开头，同时后面必须是中划线”-“，绝对不能是下划线”_“，要不就识别不出来

13. :link

普通的、未被访问的链接

14. :visited

用户已访问的链接

15. :active

链接被点击的时刻

16. :hover

鼠标指针位于链接的上方
#####注意事项：
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后

17. :focus

选择获得焦点的输入字段

18. :first-letter

用于选取指定选择器的首字母

19. :first-line

用于选取指定选择器的首行

20. :first-child

用于选取属于其父元素的首个子元素的指定选择器

21. :before

在被选元素的内容前面插入内容
用 content 属性来指定要插入的内容

22. :after

在被选元素的内容后面插入内容
after伪类清除浮动
:after { content: " "; display: block; height: 0; clear: both; }

23. :lang

24. element1~element2

element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

25. [attribute^=value]

开头

26. [attribute$=value]

匹配属性值以指定值结尾的每个元素

27. [attribute*=value]

匹配属性值包含指定值的每个元素

28. :first-of-type

匹配属于其父元素的特定类型的首个子元素的每个元素
等同于 :nth-of-type(1)

29. :last-of-type

匹配属于其父元素的特定类型的最后一个子元素的每个元素
等同于 :nth-last-of-type(1)

30. :only-of-type

匹配属于其父元素的特定类型的唯一子元素的每个元素

31. :only-child

匹配属于其父元素的唯一子元素的每个元素

32. :nth-child()

匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

33. :nth-last-child()

匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。

34. :nth-of-type()

匹配属于父元素的特定类型的第 N 个子元素的每个元素。
n 可以是数字、关键词或公式。

35. :nth-last-of-type()

匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。

36. :last-child

匹配属于其父元素的最后一个子元素的每个元素

37. :root

匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。

38. :empty

匹配没有子元素（包括文本节点）的每个元素

39. :target

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

40. :enabled

匹配每个已启用的元素（大多用在表单元素上）

41. :checked

匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

42. :not

匹配非指定元素/选择器的每个元素

43. ::selection

匹配被用户选取的选取是部分