一、元素选择器：
1、通配选择器：*
2、元素选择器：E
3、ID选择器：#id
4、类选择器：.class
二、关系选择器：
1、后代选择器：E1 E2
2、子选择器：E1>E2
3、相邻选择器：E1+E2
4、兄弟选择器：E1~E2
5、群组选择器：E1,E2
三、属性选择器：
1、属性的存在性：E[attr]，例如：a[title]，具备title属性的a标记。
2、属性的取值等于确定值：E[attr=value]
3、属性的取值不等于确定值：E[attr!=value]
4、属性的取值以确定值开头：E[attr^=value]
5、属性的取值以确定值结尾：E[attr$=value]
6、属性的取值包含确定值：E[attr*=value]
7、空格分隔：E[attr~=value]
可以找到attr属性包含value的或者attr属性包含value且利用空格和其他取值分隔开的元素。可以找到value值在空格左或者右侧的元素。
8、连字符分割：E[attr|=value]
可以找到attr属性包含value的或者attr属性的取值中含有value且在连字符左侧的元素。
四、伪类选择器：【采用:开头】
1、结构伪类选择器：
（1）根选择器：:root，文档根元素，即<html></html>。
在没有:root{}的情况下，body{}所设置的背景颜色就是整个页面的背景颜色。
在有:root{}的情况下，body{}所设置的背景颜色就是页面中有效内容的背景颜色。
例：:root{ backgound-color:#ffff00; }
body{ background-color:#ff0000; }
（2）排除选择器：E:not(selector)，从E中排除掉selector剩余的元素。
（3）空选择器：E:empty，从E中找内容为空的元素。
（4）目标选择器：E:target，可以设置作为超级链接目标的锚记在单击超级链接后的外观样式。
例：<a href=“#sun”>太阳</a>
<p>
<span id=“sun”>文本</span>文本
</p>
span:target{……}
2、父元素伪类选择器：
| 指定元素 | 匹配父元素下的子元素 | 匹配父元素下的同标记子元素 |
|---|
| 第一个子元素 | :first-child | :first-of-type |
| 最后一个子元素 | :last-child | :last-of-type |
| 第 n 个子元素 | :nth-child(n) | :nth-of-type(n) |
| 倒数第 n 个子元素 | :nth-last-child(n) | :nth-last-of-type(n) |
| 仅有的一个子元素 | :onlyt-child | :only-of-type |
3、元素状态伪类选择器：
:link，超级链接普通/默认状态下的外观样式。
:active，超级链接活动时的外观样式。
:hover，鼠标经过超级链接时的外观样式。
:visited，用户访问过后的超级链接外观样式，只能设置字色。
:focus，当文本框获取焦点时的外观样式。
:checked，当表单元素被用户选中时的外观样式。
:enabled，设置可用的表单元素的外观样式。
:disabled，设置不可用的表单元素的外观样式。
五、伪元素选择器：【采用::开头】
1、::first-letter，可以用于指定段落的第一个字母。
2、::first-line，可以用于指定段落的第一行。
3、::placeholder，调整表单元素中占位符的文本样式。
4、::selection，调整处于被选中状态的文本样式。
5、::after，
6、::before，
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
