选择器：
选择器是用来选择目标元
素的，选择器分基础选择器和复合选择器及伪类选择器。
基础选择器：
标签名{} /* 1 标签选择器：把某类标签全部选中，如下： */
p{font-size:36px;}
.类名{} /* 2 类选择器(class选择器)：选中相同类名的元素，.声明，class调用，如下： */
.box{width:100px;height:50px;}
<div class="box"></div>
<div class="box stylebox"></div> /* 多类名选择器：在class属性中添加多个类名，中间用空格隔开，即可调用多类名来实现多个样式*/
#id名{} /* 3 id选择器：选中id被命名为某名的元素，#定义，id调用，id选择器具有唯一性，相同的id名只能出现在一个标签上 */
#box{width:100px;height:200px;}
<div id="box"></div>
*{}/* 4 通配符选择器：选中文档中所有元素，不建议使用，一般使用的情况是非常少的。 */
*{color:blue;font-size:20px;}复合选择器：
div span{/* 1 后代选择器：又称包含选择器，用于选择标签的后代子孙元素及元素组，语法：外层标签写在前面，内层标签写在后面，中间用空格隔开，需要强调的是只要是后代无论多少代都可以选中，它和子代选择器的区别就在这里：不仅仅可以选择紧挨着的下一级元素。 */
color:blue;
}
<div>
<ul>
<li>
<span>苹果</span><!-- 被选中项-->
</li>
</ul>
</div>
<span>白菜</span>
ul li>a{/* 2子代选择器：选中某标签下紧挨着的某个元素，语法：父级标签 > 子级标签，强调的是：子代选择器选中的是父级紧挨着的子级元素，和后代选择器的区别就在这里。 */
color:pink;
}
<ul>
<li>
<a href="#">test1</a><!-- 被选中项-->
</li>
<li>
<div>
<a href="#">test2</a>
</div>
</li>
</ul>
p.watermelon{/* 3 交集选择器：即又的关系，同时满足条件的会被选中，语法：选择器1选择器2选择器n...,多个选择器连写，中间不用任何字符。 */
color:red;
}
<p>apple</p>
<p>orange</p>
<p class="watermelon">watermelon</p><!-- 被选中项-->
<span>苹果</span>
<span>橙子</span>
<span class="watermelon">西瓜</span>
p,
span,
.pear{/* 4 并集选择器：同时选择多个单独或一组标签，语法：多个选择器中间用逗号连接，可以快速选择需要给相同样式的所有标签 */
color:red;
font-size:40px;
}
<p>苹果</p>
<p>荔枝</p>
<del>大米</del>
<span>香蕉</span>
<ins>地瓜</ins>
<div class="pear">梨</div>
.banana+li {/* 5 相邻元素选择器：选择紧挨着某元素下的一个兄弟元素，语法：选择器1 + 标签，注意兄弟元素选择器*/
color: red;
}
<ul>
<li>苹果</li>
<li class="banana">香蕉</li>
<li>荔枝</li>
</ul>
.banana~li {/* 6 兄弟元素选择器：选择挨着某元素下的所有兄弟元素，语法：选择器1 ~ 标签，注意相邻元素选择器*/
color: red;
}
<ul>
<li>苹果</li>
<li class="banana">香蕉</li>
<li>荔枝</li>
<li>菠萝蜜</li>
<li>桃子</li>
</ul>伪类选择器：
伪类选择器是以冒号：开始的，如下面链接伪类选择器（需要和伪元素区分）：
a:link{color:black;}/* 设置未访问的链接样式 */
a:visited{color:gray;}/* 设置已访问的链接样式 */
a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */
a:active{color:red;}/* 设置鼠标点击时链接的样式 */
/* 需要注意：这四个链接的伪类选择器是按照上面的顺序书写的，必须严格遵循。 */提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan