1. 常见选择器
1）id选择器
2）类选择器
3）标签选择器
4）后代选择器
5）群组选择器
6）子代选择器
<style>
#p1{} id选择器
.div{} 类选择器
img{} 标签选择器
.div img{} 后代选择器
.box1,.box2{} 群组选择器
.div>div{} 子代选择器
</style>
<body>
<div class="div">
<div class="box1"></div>
<div class="box2"></div>
< img src="" alt="">
<p id="p1"></p >
</div>
</body
2. 属性选择器
- [属性名=属性值]可以更加精准的根据属性来选择标签
- [属性名~=属性值]选择属性值中含有指定单词的标签
- [属性名|=属性值]选择属性值中以指定值开头的标签，必须是第一个字母
- [属性名^=属性值]选择属性值中以指定值开头的标签，带有指定的字母就行
- [属性名*=属性值]选择属性值中带有指定值的标签，只要包含相同的字母就行
3. 伪类选择器
:link 未点击之前
:visited 点击之后
:hover 鼠标悬浮
:active 正在点击
四个伪类选择器必须按照顺序来定义, :hover不能设置在:link和:visited之前（覆盖）, :active不能设置在:hover之前, :link和:visited顺序不强制要求
4. 伪元素选择器
- +兄弟选择器--选择指定标签，其同父级紧挨着的下一个兄弟元素
- :first—child--选择每一个作为其父元素 第一个子元素的指定标签
- :last-child--选择每一个作为其父元素 最后一个子元素的指定标签
- :first-of-type--选择每一个父元素下面的 第一个指定元素
- :last-of-type--选择每一个父元素下面的 最后一个指定元素
- :not(selector)--选择每个不是指定标签的标签
- :nth-child(n)--选择每一个父元素下面的第n个子元素的目标元素
- :nth-last-child(n)--选择每一个父元素下面的倒数第n个子元素的目标元素
- :nth-of-type(n)--选择每一个父元素下面的 第n个指定元素
- :nth-last-of-type(n)--选择每一个父元素下面的 倒数第n个指定元素
