一、常用选择器
1.元素选择器：语法 标签名{}
例如：将下面古诗中h1标签的文字变成红色
<body> <h1>《静夜思》</h1> <h2>唐·李白</h2> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </body>
需要在style中写 标签名{选择所需要的颜色}，例如：
<style> h1{ color: red; } </style>
效果展示：
2.id选择器: 在标签中创建id属性值 （属性值不能以数字开头，且一个页面不能重复） 语法： #id属性值{}
例如：
效果展示：
3.class选择器 在标签中创建class属性值 （属性值可以重复） 语法：.class属性值{}
例如：
<body> <h1>《静夜思》</h1> <h2>唐·李白</h2> <p>床前明月光，</p> <p class="abc">疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </body>
如果将此句变成橘色，需要在style中写 .abc{所需颜色}：
<style> .abc{ color: orange; } </style>
效果展示：
二、关系选择器
1.子元素选择器：
作用：选中指定的父元素对应的指定子元素
语法：父元素>子元素{}
例如：通过div超市，找到span衣服，给span衣服设置字体颜色，红色
<div> 超市 <p> 日用品区 <span>牙膏</span> <span class="s2">洗发水</span> <span>纸巾 </span> <span>沐浴露</span> <span>护发素</span> </p> <p>生鲜区</p> <span class="s1">衣服</span> </div>
span衣服是div的子元素 所以写 div>span{所需颜色} 也可以写 div>span.s1(span.s1是复合函数，作用是选中同时复合多个选择器的内容)
<style> div>span{ /*子元素选择器*/ color: red; } </style>
2.后代选择器：
作用：选中指定的祖先元素对应的指定后代元素
语法：祖先元素 后代元素{}
例如：
<div> 超市 <p> 日用品区 <span>牙膏</span> <span class="s2">洗发水</span> <span>纸巾 </span> <span>沐浴露</span> <span>护发素</span> </p> <p>生鲜区</p> <span class="s1">衣服</span> </div>
通过div超市，找到span洗发水，给洗发水设置背景色绿色
span洗发水的父元素是p，p的父元素是div，从而span洗发水是div的后代元素所写出div span.s2(div后面是有空格，span.s2是复合选择器，是为了选中同时复合多个选择器的内容，因为有很多span后代，需要精准选择)
<style> div span.s2 { /* 后代选择器 */ background-color: green; } </style>
3.选择下一个兄弟选择器
语法：兄弟+{}
例如：
通过span洗发水，找到纸巾，给纸巾字体放大到30px
<div> 超市 <p> 日用品区 <span>牙膏</span> <span class="s2">洗发水</span> <span>纸巾 </span> <span>沐浴露</span> <span>护发素</span> </p> <p>生鲜区</p> <span class="s1">衣服</span> </div>
span纸巾是span洗发水的下一个兄弟所以可以写 .s2+span{}
<style> .s2+span { font-size: 30px; } /*选中下一个兄弟*/ <style>
4.选中下面所有的兄弟选择器
语法：兄～弟{}
例如：
通过span洗发水，找到后面所有的兄弟，给他们设置字体颜色橘色
<div> 超市 <p> 日用品区 <span>牙膏</span> <span class="s2">洗发水</span> <span>纸巾 </span> <span>沐浴露</span> <span>护发素</span> </p> <p>生鲜区</p> <span class="s1">衣服</span> </div>
span纸巾，span沐浴露，span护发素都是span洗发水后面的兄弟，所以可以写.s2~span
<style> .s2~span { /*选中下面所有兄弟*/ color: orange; } </style>
整体效果的展示：
结语：
元素之间的关系：
父子关系 直接包含的关系
祖先后代关系 直接或间接包含的关系 祖先后代也包含父子关系
兄弟关系 拥有共同的父元素。
