选择器分类
- 标签选择器
- 类选择器(重点)
- ID选择器
- 通配符选择器
- 标签指定式选择器（交集选择器）(重点)
- 后代选择器（重点）
- 并集选择器
- 子代选择器(补充)
- 属性选择器(补充)
标签选择器
- 标签{属性: 值;}
类选择器
- 类名{属性: 值;}
-
复合选择器
- ` 1.复合选择器:div.p-one 既为div标签，class又等于p-one ;div.p-one{background-color: skyblue;
子代选择器只能选中直接后代元素
<style>
/* 后代选择器，包含直接和非直接子 */
/* .one span{
color: red;
} */
/* 子代选择器只能选中直接后代元素 */
/* .one>span{
color: green;
} */
div>span{
color: green;
}
</style>
<div class="one">
<p class="two">
<span>p中的span</span>
</p>
<span>文字1</span>
</div>
注意:
- 子代选择器只能选中直接后代元
属性选择器
`/* div标签必须有class属性 */
/* div[class]{
color: red;
} */
`/*div标签必须有class属性，并且class属性必须等于one；必须有id属性，并且id等于d-one */
div[class="one"][id="d-one"]{
color: red;
}