选择器
后代选择器
子选择器
并集选择器
链接伪类选择器
focus伪类选择器
<!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 {
color: pink;
}
ol a {
color: skyblue;
}
</style>
</head>
<body>
<ol>
<li>ol的孩子li</li>
<li>ol的孩子li</li>
<li>ol的孩子li</li>
<li>ol的孩子li</li>
<li>ol的孩子li</li>
<li><a href="#">sunzi</a></li>
</ol>
</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>
.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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
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>
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有被访问的链接 */
a:hover /* 选择鼠标位于其上链接 */
a:active /* 选择活动链接（鼠标按下未弹起） */
/* 选取获得焦点的表单元素 */
input:focus {
background-color: yellow;
}