概要
1.复合选择器：多个简单选择器组合在一起，形成一个复合选择器
2.分类：
2.1 后代选择器：父选择器 后代选择器{样式属性：属性值}--- 选择父元素下的所有后代元素 --- 选择器之间用空格隔开
2.2 子代选择器：父选择器 > 子选择器{样式属性：属性值}--- 选择父元素下的所有子元素 --- 选择器之间用 > 隔开
2.3 并集选择器：选择器1，选择器2，选择器3{样式属性：属性值}--- 选择器之间用 , 隔开
2.4 :hover 伪类选择器：选择器:hover{样式属性：属性值}--- 鼠标悬停在选择器上时，触发的样式
整体架构流程
首先我们在body标签内输入样式，我们需要对文字“常德市”和“武陵区”进行字体颜色上的改变。
1、后代选择器的使用
我们通过后代选择器进行改变的代码如下：
2、子代选择器的使用
我们通过子代选择器进行改变的代码如下：
3、并集选择器的使用
并集选择器顾名思义，通过“，”将需要改变的样式为一致的选择器进行并集同时修改，便于观看。
例如：需要将id=“aa1”和id=“aa2”的选择器同时修改，则在style标签内输入
#aa1,#aa2{
color:red;
}
4、:hover 伪类选择器的使用
:hover 伪类选择器是通过选择器:hover{样式属性：属性值}以达到鼠标悬停在选择器上时，触发样式。例如：
.nav li:hover {
background-color: #f00;
}
小结
本章只讲了复合选择器中通用的几种，还有相邻兄弟选择器、通用选择器、属性选择器等，如果有需要的可以留言。
:hover 伪类选择器通常用于导航条，以下为导航条的具体代码和结果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
/* 去除列表前的符号 */
list-style: none;
}
.nav li {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #f5c330;
display: inline-block;
}
.nav li:hover {
background-color: #f00;
}
.nav li a {
text-decoration: none;
color: #fff;
display: block;
}
</style>
</head>
<body>
<!-- ul>li*5>a emment语法 -->
<ul class="nav">
<li><a href="#">前端</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">大数据</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">C++</a></li>
</ul>
</body>
</html>
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
