本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、常用选择器
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属性值{}
例如：
<body>
<h1>《静夜思》</h1>
<h2>唐·李白</h2>
<p id="abc">床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
如果将此句话变成绿色，需要style中写 #id属性值{所需颜色}
<style>
#abc{
color: green;
}
</style>
效果展示：
![]( "点击并拖拽以移动")
编辑
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超市，找到span洗发水，给洗发水设置背景色绿色
<div>
超市
<p>
日用品区
<span>牙膏</span>
<span class="s2">洗发水</span>
<span>纸巾 </span>
<span>沐浴露</span>
<span>护发素</span>
</p>
<p>生鲜区</p>
<span class="s1">衣服</span>
</div>
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>
整体效果的展示：
编辑
结语：
元素之间的关系：
父子关系 直接包含的关系
祖先后代关系 直接或间接包含的关系 祖先后代也包含父子关系
兄弟关系 拥有共同的父元素
