<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器 后代选择器</title>
<style>
ol li {
color: pink;
}
ol li a {
color: red;
}
</style>
</head>
<body>
<ol>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器 子元素选择器</title>
<style>
.nav > a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器 并集选择器</title>
<style>
/*要求1：请把熊大和熊二改为粉色*/
/*div,p {*/
/*color: pink;*/
/*}*/
/*要求2：请把熊大和熊二该问粉色 还有 小猪一家改为粉色*/
div,
p,
.pig li {
color: pink;
}
</style>
</head>
<body>
<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">
<title>链接伪类选择器</title>
<style>
/*a:link 选择所有未被访问的链接*/
/*a:visited: 选择所有已被访问的链接*/
/*a:hover 选择鼠标指针位于其上的链接*/
/*a;active: 选择活动链接（鼠标按下未弹起的链接）*/
/*必须按照此顺序写*/
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: orange;
}
a:hover {
color: skyblue;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>：focus 伪类选择器</title>
<style>
/*把获得光标的input表单选择出来*/
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
来源：CSDN
作者：罗天旭
链接：https://blog.csdn.net/carrotluotian/article/details/103741918