复合选择器
后代选择器
- 后代选择器也叫包含选择器，它可以选择父元素里面的子元素
- 有序列表与无序列表示例
- 可在style中设置
ol中li的不同颜色,也可多级继续设置a的颜色
子选择器
- 子选择器只选择最近一级的子元素
- 样式表中修改
并集选择器
用于集体声明，比如我想让div和p的样式相同
样式表中修改
复合选择器代码示例
<!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>
/* 我想要吧ol里面的li选出来改为pink */
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li {
color: rgb(201, 201, 47);
}
.navnav>a {
color: rgb(9, 9, 32);
}
div,
p,
.pig li {
color: pink;
}
</style>
</head>
<body>
<ol>
不变色
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是ol的孙子</a></li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
<ul class="nav">
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
</ul>
<div class="navnav">
<a href="#">son</a>
<p><a href="#">grandson</a></p>
</div>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>小猪爸爸</li>
<li>小猪妈妈</li>
</ul>
</body>
</html>
- 效果展示
伪类选择器
- 伪类选择器即鼠标放上去会变色，在样式表中设置不同颜色变化
- 伪类选择器代码示例
<!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>
/* 未被访问过的链接 */
a:link {
color: #333;
text-decoration: none;
}
/* 选择已访问过的链接 */
a:visited {
color: orange;
}
/* 鼠标经过 */
a:hover {
color: skyblue;
}
/* 按下鼠标不松开 */
a:active {
color: green;
}
/* 键入后变色不松开 */
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<a href="#">me</a>
<input type="text">
<input type="text">
</body>
</html>
- 效果展示
本文含有隐藏内容，请 开通VIP 后查看