后代选择器（重要）
定义：它可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {样式}
<!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>后代选择器</title>
<style>
/*改的是所有li的样式*/
ol li {
color: red;
}
ol a {
color: green;
}
/*针对性设置*/
.huangse li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a>我是孙子</a></li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
<ul class="huangse">
<li><a>我是黄色</a></li>
</ul>
</body>
</html>
结果演示
子选择器（重点）
定义：只能选择某元素的最近一级子元素，简单理解就是选择亲儿子元素。
语法：
元素1>元素2 {样式声明}
<!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>子选择器</title>
<style>
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a>我是儿子</a>
<p>
<a>我是孙子</a>
</p>
</div>
</body>
</html>
结果演示
并集选择器（重点）
定义：可以选择多组标签，同时为他们定义相同的样式。
语法：
元素1, 元素2 {样式}
<!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>并集选择器</title>
<style>
div,
p,
.c li {
color: red;
}
</style>
</head>
<body>
<div>1</div>
<p>2</p>
<span>3</span>
<ul class="c">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
</body>
</html>
结果演示
伪类选择器
定义：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第几个元素。伪类选择器有很多种，有链接伪类，结构伪类等。
链接伪类
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:hover 选择指针停到的链接
- a:active 选择活动链接（鼠标按下后未弹起的链接）
必须按照lvha的顺序声明：link-visited-hover-active
<!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>伪类选择器之伪类选择器之链接伪类</title>
<style>
/*未访问的链接*/
a:link {
color: #333;
text-decoration: none;
}
/*访问过的链接*/
a:visited {
color: red;
}
/*鼠标悬停的链接*/
a:hover {
color: green;
}
/*鼠标按下后未弹起的链接*/
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="#">王学龙</a>
</body>
</html>
结果演示
：focus伪类选择器
定义：用于选取获得焦点（光标）的表单元素。只针对input类表单元素。
<!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>:focus伪类选择器</title>
<style>
/*把获得光标的input表单元素选取出来*/
input:focus {
background-color: blue;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
结果演示
