一、常用选择器
1、元素选择器：根据标签名选中指定元素。
语法：标签名{}
例子：p{} h1{} div{}
2、id选择器：根据元素的id属性值选中一个元素。id最好不要重复。
语法：#id属性值{}
例子：#box{} #red{}
3、类选择器（class选择器）：根据元素的class属性值选中一组元素。可以重复。
语法：.class属性值
class属性是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组。
可以同时为一个元素指定多个class属性。
4、通配选择器：选中页面中的所有元素。
语法：*{}
5、交集选择器：选中同时复合多个条件的元素。
语法：选择器1选择器2选择器3选择器n{}
注意：交集选择器中如果有元素选择器必须使用元素选择器开头
6、选择器分组（并集选择器）：同时选择多个选择器对应的元素。
语法：选择器1，选择器2，选择器n{}
例如：#b1，.p1,h1,span，div.red{} 也成立.
7、关系选择器：
① 父元素：直接包含子元素的元素。
② 子元素：直接被父元素包含的元素。
③ 祖先元素：直接或间接包含后代元素的元素。一个元素的父元素也是它的祖先元素。
④ 后代元素：直接或间接被祖先元素包含的元素。子元素也是后代元素。
⑤ 兄弟元素：拥有相同父元素的元素。
- 子元素选择器：选中指定父元素的指定子元素。
语法：父元素>子元素
8、属性选择器：
① [属性名] ：选择含有指定属性的元素。
② [属性名=属性值] ：选择含有指定属性和属性值的元素。
③ [属性名^=属性值] ：选择属性值以指定值开头的元素。
④ [属性名$=属性值] ：选择属性值以指定值结尾的元素。（游览器语言为中文时：[属性名￥=属性值]）
⑤ [属性名*=属性值] ：选择属性值中含有某值的元素。
9、伪类选择器（伪类：不存在的类，特殊的类）
① 伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素……
② 伪类一般情况下都是使用 ： 开头。如：
：first-child 第一个元素
：last-child 最后一个元素
：nth-child（） 选中第n个子元素
特殊值：
n：第n个，n的范围是0到+∞
2n（或even）：表示选中偶数位元素。
2n+1（或odd）：表示选中奇数位元素。
③ 以上这些伪类都是根据所有的子元素进行排序。
④ ：first-of-type
：last-of-type
：nth-of-type
这几个伪类功能和上述的类似，不同点就是他们是在同类型元素中进行排序
⑤ ：not（） 否定伪类：将符合条件的元素从选择器中去除。
⑥ 超链接（a元素）的伪类：
- ：link 用来表示没访问过的链接（正常的链接）
- ：visited 用来表示访问过的链接，但是由于隐私问题，visited这个伪类只能修改链接的颜色
- ：hover 用来表示鼠标移入的状态
- ：active 用来表示鼠标点击的状态
10、伪元素选择器
① 伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
② 伪元素使用 ：：开头。如：
：：first-letter 表示第一个字母
：：first-line 表示第一行
：：selection 表示选中的内容（通过鼠标拖动选中）
：：before 表示元素的开始
：：after 表示元素的最后
二、选择器练习推荐
选择器的学习很重要，枯燥的文字可能起不到多大的理解作用，在这里向大家推荐一款很好玩的选择器游戏：选择器餐厅练习。以下是选择器餐厅练习网址：
欢迎大家留言一起讨论。
接下去下一篇继续为大家分享学习内容。
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
