一、什么是选择器？
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
二、有哪些选择器？
标签选择器
<!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>
p{
color: red;
/* 设置字体颜色 */
}
span{
font-size: 30px;
/* 设置字体大小 */
}
div{
width: 200px;
height: 200px;
background-color: bisque;
font-size: 50px;
/* 设置div大小、背景色、里面的字体大小 */
}
</style>
</head>
<body>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<span>222222</span>
<span>222222</span>
<span>222222</span>
<div>333333</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>
.red-color{
color: pink;
}
.blue-color{
color: orange;
}
.green-color{
color: green;
}
.size-small{
font-size: 10px;
}
.size-middle{
font-size: 20px;
}
.size-big{
font-size: 50px;
}
</style>
</head>
<body>
<p class="red-color size-small">1111111</p>
<p class="blue-color size-middle">2222222</p>
<p class="green-color size-big">3333333</p>
</body>
</html>ID选择器
<!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>
#box{
width: 250px;
height: 250px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="box"></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>
.box > p{
color: red;
/* > 子代选择器符号，选择box的儿子 */
}
</style>
</head>
<body>
<div class="box">
<p>abcdefg</p>
<p>abcdefg</p>
<p>abcdefg</p>
</div>
<p>div外面的p标签。</p>
</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>
.box p{
color: red;
}
/* 空格 后代选择器符号，选择box的所有儿孙后代 */
</style>
</head>
<body>
<div class="box">
<p>1111111</p>
<div>
<p>5555555</p>
</div>
<p>2222222</p>
<p>3333333</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>
h1,h2,h3{
color: red;
}
/* ， 子代选择器符号，并列所选所有标签 */
</style>
</head>
<body>
<h1>99999</h1>
<h2>88888</h2>
<h3>77777</h3>
</body>
</html>