CSS中4种关系选择器
元素(标签)之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
根据以上的关系，可以使用如下选择器
1:子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素{}
例如：div>span{},#root>.s1{}
2: 后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
例如：div .rou{}
3:选择下一个兄弟(紧紧挨着我的)
语法：前一个+下一个
例子：p+span
4:选择下面所有的兄弟(前面的不选)
语法：兄～弟
例子：p～span
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 需求一：为div的子元素span设置一个字体颜色红色 */div > span {color: red;}/* 需求二：div里的span元素字体都变为30px */div .rou {font-size: 30px;}div > p > span {color: violet;}/* 需求三： 选择零食区，字体颜色变为blue*/p + span {color: blue;}p ~ span {background-color: tomato;}</style></head><body><div id="c1">我是超市<br /><span>我是零食区</span><p>我是生鲜区<span class="rou" id="">肉类</span></p><span>我是鞋包区</span><br /><span>我是洗护区</span></div><br /><span>我是超市外的小卖部</span></body>
</html>