CSS选择器用于“查找”（或选取）要设置的HTML。
可以将CSS选择器分为五类：
1.基本选择器
基本选择器又包含以下四种选择：
1.1标签选择器
根据标签的名称设置对应的样式
代码：
<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: coral;}
</style>
</head>
<body>
<p>每个段落都会受影响</p>
<P>这个段落会</P>
<p>这个段落也会</p>
</body>
</html>运行效果：
1.2ID选择器
通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值。
代码：
<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>
#one{color: coral;}
</style>
</head>
<body>
<p id="one">段落都会受影响</p>
<P>这个段落不会</P>
</body>
</html>运行效果：
注意：id名称不能以数字开头。
1.3类选择器
通过获取标签里的class属性去设置对应的样式，设置的时候“.”+class的属性值。
代码：
<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: red;}
</style>
</head>
<body>
<h2 class="red">标题会变成红色</h2>
<P class="red">段落也会变成红色</P>
</body>
</html>运行效果：
注意：类名不能以数字开头。
还可以指定只有特定的HTML元素会受类的影响。
代码：
<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>
h2.red{color: red;}
</style>
</head>
<body>
<h2 class="red">标题会变成红色</h2>
<P class="red">段落不会变成红色</P>
</body> 运行效果：
HTML也可以引用多个类
代码：
<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: red;}
.big{font-size: 20px;}
</style>
</head>
<body>
<p class="big">段落字号会变大</p>
<P class="red">段落会变成红色</P>
<P class="red big">段落会变成红色，而且字号会变大</P>
</body>运行效果：
1.4通配符选择器
通过*设置对应的样式
代码：
<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>
*{color:blue;}
</style>
</head>
<body>
<p>每一个都会受影响，变成蓝色</h2>
<div>div标签会变成蓝色</div>
<ul>
<li>列表1，变成蓝色</li>
<li>列表2，变成蓝色</li>
<li>列表3，变成蓝色</li>
</ul>
</body>运行结果：
1.5四种选择器的优先级：
ID选择器>类选择器>标签选择器>通配符选择器
2.包含选择器
包含选择器又包含以下三个选择器：
2.1子代选择器
子代选择器获取的某个标签的第一级子标签，使用>（子选择符）
代码：
<style>
/* 子代选择器 */
.list > ul{
border: 1px solid saddlebrown;/*给列表添加一个边框*/
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one">这是一个段落标签</p>
<div class="box">这又是一个div</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
<li>这是列表9</li>
</div>
</body>
</html>运行结果：
2.2后代选择器
获取的某个标签的所有子标签
代码
<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>
/* 后代选择器 */
.list li{
border: 1px solid brown;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one">这是一个段落标签</p>
<div class="box">这又是一个div</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
<li>这是列表9</li>
</div>
</body>运行结果：
可以看到，列表1---5的父级标签与列表6---9的父级标签不同，但它们的都是biv标签的后代标签。
2.3分组选择器
也叫做后代选择器，可以设定多个标签，使用逗号进行分割。
代码：
<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>
/* 分组选择器 */
h1,#one,.box{
color: blue;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one">这是一个段落标签</p>
<div class="box">这又是一个div</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
<li>这是列表9</li>
</div>
</body>运行结果：
3.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
3.1可以选中某个标签中存在的某个值
代码：
<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>
/* 选中某个标签存在的属性 */
.container[class]{
color: aqua;
}
div[title]{
text-align: center;
color: brown;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.2可以选择确切的某个值
代码：
<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>
/* 确切的等于某个值 */
input[type="password"]{
background-color: burlywood;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.3可以选择属性里包含的某个值
代码：
<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>
/* 属性里面包含某个值 */
input[type *="e"]{
background-color: coral;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.4选择属性中以xx开始的值
代码：
<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>
/* 属性中的值以xxx开始 */
input[type ^="e"]{
background-color: darkgray;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.5选择属性中以xxx结尾的值
代码：
<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>
/* 属性中的值以xxxx结束 */
input[type $="rl"]{
background-color: darkolivegreen;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.6选择下一个标签
代码：
<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>
/* 表示下一个标签 */
.msg + p{
color: cadetblue;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
3.7选择属性具体的等于某个值
代码：
<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>
/* 属性等于某个值 */
[class=msg]{
color: salmon;
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="李四">
<input type="url" value="王五">
<input type="password" value="nicai">
<hr>
<div class="msg">我喜欢吃零食</div>
<p id="msg2">这是一个段落标签</p>
</body>运行结果：
4.伪类选择器
伪类用于定义元素的特殊状态。同一个标签，在不同的状态下有不同的样式。伪类是通过冒号来表示，最早的时候主要是用来渲染a标签不同的状态下的不同的样式。
比如，它可以用于：设置鼠标悬停在元素上的样式；为已访问和未访问链接设置不同的样式；设置元素获得焦点时的样式。
超链接点击之前-------:link
超链接被点击之后--------:visited
鼠标放在超链接上的时候（悬停）--------:hover
超链接激活的时候（鼠标点击但是不松手的时候）--------:active
代码：
<style>
/* 超链接点击之前是红色 */
a:link{ color: brown; }
/* 超链接点击之后是橙色 */
a:visited{color: orange;}
/* 鼠标悬停的时候的颜色是绿色 */
a:hover{color: green;}
/* 超链接被激活的时候是蓝色 */
a:active{color: blue;}
/* div:hover{color: blueviolet;} */
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
<!-- <div>这是一个div</div> -->
</body>注意：对于a标签的四种状态的顺序是一定的：a:link a:visited a:hover a:active。
5.伪元素选择器
伪元素用于设置元素指定部分的样式。
比如：它可以用于：设置元素的首字母，首行的样式；在元素的内容之前或之后插入内容。
:defore ------- css2 中 ::before ------- css3 中
:after -------- css2中 ::after -------- css3中
注意：使用before和after的时候一定要给写上content属性。
代码：
<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>
p{
color: brown;
font-size: 30px;
}
p::before{content:"张三说" ;color: chocolate;}
p::after{content: "对不对";color: crimson;}
</style>
</head>
<body>
<p>这是一个段落</p>
</body> 运行结果：
