4.HTML&CSS---

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>