CSS选择器 （超全）

一、元素选择器

1. 通配符选择器：* { }

选中页面中的所有的元素（会影响浏览器的性能）

2.标签名选择器：元素名 { }

选中页面中所有的指定标签

3.id选择器：#id { }

选中具有指定id的元素(不建议用id写样式)

4.类名选择器：.class { }

**.**加class类名的选择器

5.分组选择器：选择器1，选择器2，....,选择器n { }

几个选择器选中的元素 共用一套样式

6.交集选择器：选择器1选择器2{ }

两者之中相同的

二、关系选择器

1. 子代选择器：父元素>子元素{ }
2. 后代选择器（空格隔开）：祖先元素 后代元素{ }
3. 相邻选择器：+ 选中某个元素之后的 相邻下一个元素
4. 兄弟选择器：~ 选中某个元素之后的 其他的兄弟元素

三、属性选择器

1. [name] 具有name属性的元素
2. [att="val"] 具有att属性且属性值完全等于val的元素(一个字符都不能少，包括空格)
3. [att~="val"] 具有att属性, 且多个用空格隔开的属性值里面, 其中一个等于val的元素
4. [att^="val"] 具有att属性, 且属性值的整个字符串, 以val开头
5. [att$="val"] 具有att属性, 且属性值的整个字符串, 以val结尾
6. [att*="val"] 具有att属性, 且属性值的整个字符串, 含有val字符
7. [att|="val"] 具有att属性, 且属性值的整个字符串, 以val开头用-连接其他字符, 或者属性值只有val

四、其他伪类选择器

1. :root 只选中HTML元素
2. :focus 元素获取焦点时的样式
3. :not(css选择器) 选择不含有某个选择器的元素
4. :first-child 选中第一个子元素
5. :first-of-type 选中第一个指定元素
6. :last-child 选中最后一个子元素
7. :last-of-type 选中最后一个指定的元素
8. :nth-child(n) 选中第n个元素
9. :nth-of-type(n) 选中第n个指定的元素 1. nth-child() 和 :nth-of-type() 可以选择奇数和偶数 2. odd 选中奇数个元素 3. even 选中偶数个元素 4. 2n 选中偶数个元素 5. 2n-1 选中奇数个元素
10. :only-child 选中唯一一个的子元素
11. :only-of-type 选中唯一的指定元素
12. :empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素
13. :checked 选中页面中被选中的单选框或复选框
14. :enabled 选中页面中, 处于可用(没有被禁用)的元素
15. :disabled 选中页面中 处于禁用状态的元素
16. :target 选中被激活的锚点

五、伪元素选择器

概念：在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。

1. :first-letter 给第一个字符添加特殊样式
2. :first-line 给第一行添加样式
3. :before 在内容的前面 插入伪元素(理解成span元素)

• 一定要与content：一起使用
• content： 内容, content 可以未空, 但必须要有

4、 :after 在内容之后, 插入伪元素(理解成span元素)

• 一定要与content：一起使用
• content： 内容, content 可以未空, 但必须要有
• 用来存放 只有装饰作用, 没有交互作用的小图标