选择器是什么？
CSS选择器是CSS规则的第一部分，它是选择HTML元素的方式。
<html>
<body>
<p>选我</p>
<div>还是选我</div>
<span>或者是选我</span>
<nav>又或者是选我</nav>
p {
color: red;
font-size: 16px;
}
<!-- p 是选择标签，red和16px是CSS属性 -->
</body>
</html>CSS的基础选择器
<html>
<body>
<p>选我</p>
<div>还是选我</div>
<span>或者是选我</span>
<nav>又或者是选我</nav>
p {
color: red;
font-size: 16px;
} <!-- p 是选择标签，red和16px是CSS属性 -->
</body>
</html>
CSS的类型选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的类型选择器</title>
<style>
div {
background-color: lightblue;
}
p {
color: red;
font-size: 20px;
}
h1 {
color: blue;
font-size: 30px;
}
ul {
color: #076b92;
}
</style>
</head>
<body>
<!-- 类型选择器 标签选择器 元素选择器 -->
<div>
<p>我是段落</p>
<h1>我是标题</h1>
</div>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
</ul>
</body>
</html>CSS的类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS的类选择器</title>
<style>
/* 类选择器 选择一个或者多个 差异化选择 */
.box {
color: blueviolet;
background-color: lightblue;
size: 30px;
}
</style>
</head>
<div>
<div>
<p class="box">我是段落</p>
<h1>我是标题</h1>
</div>
<ul>
<li class="box">我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
</ul>
</body>
</html>CSS的id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的id选择器</title>
<style>
#box {
background-color: lightblue;
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p id="box">我是段落</p>
<h1>我是标题</h1>
</div>
<ul>
<li>我是列表项1</li>
<li id="box">我是列表项2</li> <!-- 给列表项2添加id属性 浏览器可以正常显示，但是不允许这么写 -->
<li>我是列表项3</li>
<li>我是列表项4</li>
</ul>
</body>
</html>
内容块类型选择器相当于名字，可以重复使用，id选择器相当于身份证号码，是唯一的，不可重复的。
CSS的通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
</head>
<style>
* {
color: red;
margin: 0; /* 重置所有元素的外边距 */
padding: 0; /* 重置所有元素的内边距 */
}
</style>
<body>
</body>
</html>注意选择器的总结：
CSS的关系选择器 *
内容块关系选择器是通过位置关系来选择目标元素（标签），可以更精准选择某些元素，常见如下： *
后代选择器
内容块选择某个元素的后代元素（不限层级，包括子元素，孙元素）
<!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>
/* 后代选择器 */
div a { /* 这里把div换成footer是一样 */
color: chocolate;
}
.nav li a { /* 这里把nav换成ul也是一样 */
color: blueviolet;
font-size: 20px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">我是超链接1</a></li>
<li><a href="#">我是超链接2</a></li>
<li><a href="#">我是超链接3</a></li>
<li><a href="#">我是超链接4</a></li>
</ul>
<div class="footer">
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">隐私政策</a>
</div>CSS的子代选择器
HTML代码为：
<!-- 子代选择器-->
<div>
<span>我是段落1</span>
<p><span>我是段落2</span></p>
<p>我是段落3</p>
</div>CSS样式代码为：
<style>
div > span {
color: red;
background-color: yellowgreen;
}
</style>CSS的邻接兄弟选择器
<!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>
/* 邻接兄弟选择器 */
.box+p {
color: orange;
font-size: 26px;
}
</style>
</head>
<body>
<!-- 邻接兄弟选择器 -->
<div class="box">
<p>我是邻接兄弟选择器</p>
<p>我是邻接兄弟选择器</p>
<h2>我是邻接兄弟选择器</h2>
<p>我是邻接兄弟选择器</p>
<p>我是邻接兄弟选择器</p>
</div>
</body>
</html>浏览器解析效果如图：
CSS的通用兄弟选择器
<!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>
/* 邻接兄弟选择器 */
好~p {
color: orange;
font-size: 26px;
}
</style>
</head>
<body>
<!-- 兄弟选择器 -->
<div class="box-1">
<p>我是段落1</p>
<p>我是段落2</p>
<h2>我是标题1</h2>
<p>我是段落3</p>
<p>我是段落4</p>
</div>
</body>
</html>浏览器解析效果如图：
关系选择器总结：
