HTML
元素选择器
作用: 通过元素选择器可以选择页面中的所有指定元素
p {
color: red;
}
<p>锄禾日当午</p>
id选择器
通过元素的id属性值选中唯一的一个元素
#p1 {
font-size: 20px;
}
<p id="p1">锄禾日当午</p>
类选择器
通过元素的class属性值选中一组元素
.p2 {
color: aquamarine
}
<p class="p2">锄禾日当午</p>
class属性和id属性类似，只不过class属性可以重复，拥有相同class属性值的元素，我们说它们是一组元素，
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
<p class="p2 hello">锄禾日当午</p>
并集选择器（选择器分组）
通过选择器分组可以同时选中多个选择器对应的元素
#p1,.p2 {
color: blueviolet;
}
通配选择器
它可以用来选中页面中的所有的元素
* {
color: yellowgreen;
}
交集选择器
可以选中同时满足多个选择器的元素
- 选择器1选择器2选择器N{}
span.p3 {
color: antiquewhite;
}
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
元素之间的关系
- 父元素: 直接包含子元素的元素
- 子元素:直接被父元素包含的元素
- 祖先元素:直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素:直接或间接被祖先元素包含的元素，子元素也是后代元素
- 兄弟元素:拥有相同父元素的元素叫兄弟元素
后代元素选择器
div span {
color: greenyellow;
}
<div>
<span>我是div中的span</span>
<p><span>我是p中的span</span></p>
</div>
<span>我是body中的span</span>
子元素选择器
div > span {
font-size: 40px;
}
<div>
<span>我是div中的span</span>
<p><span>我是p中的span</span></p>
</div>
