###一、CSS选择器
作用：规范页面中哪些元素能够应用声明好的样式
目的 ：匹配页面元素
1.标签选择器/元素选择器
特点：将标签名作为选择符，来匹配文档中所有的该标签，包含后代元素
语法：
标签名{
属性：值
}
标签名如a,div
text-decoration : none;取消下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #aaffff;
font-size:20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div>这是标签</div>
<a href="">点一下</a>
</body>
</html>
2.类选择器
特点：通过元素的class属性值进行匹配
语法：
.cl{
样式
}
<p class="cl">p文本</p>
以英文.开头，跟上class属性值，中间没有空格
创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl{
font-size:24px;
background-color: orange;
font-style:italic;
}
</style>
</head>
<body>
<div>这是标签</div>
<p class="cl">p文本</p>
</body>
</html>
3.ID选择器
id 作用：HTML中所有的元素都有一个id属性，主要用来表示该元素在文档中的标志，具有唯一性。
id 选择器：通过元素的id属性值进行匹配
语法：
属性值{
样式
}
注意：通常网页中外围的结构化标签，都使用id进行标识，具有唯一性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#seq{
width:100%;
height:50px;
background-color: pink;
}
</style>
</head>
<body>
<span id="seq">这是一个span文本</span>
</body>
</html>
4.群组选择器
作用：为多个选择器设置共同的样式。
语法：
选择器1，选择器2，选择器3{
样式
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,h1,p{
background-color: gray;
margin:0;<!--外边距为0-->
}
</style>
</head>
<body>
<h1>标题1</h1>
<div>div</div>
<p>p</p>
</body>
</html>
5.后代选择器
作用：依托于元素的后代关系来匹配元素（既包含直接子元素，也包含后代元素）。
语法：
选择器1 选择器2{
样式
｝
在选择器1对应的元素中匹配后代元素，后代元素需满足选择器2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav span{
border-radius:2px;
background-color:RGB(204,204,204);
padding-left:10px;
}
</style>
</head>
<body>
<p id="nav">
<span>你好</span>
<span>
<span>在那里</span>
</span>
<span>再见</span>
</p>
</body>
</html>
6.子代选择器
作用：依托元素的子代关系进行匹配，只匹配直接子元素。
语法：
选择器1>选择器2 {
｝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav>ul>li{
color:red;
}
</style>
</head>
<body>
<div id ="nav">
<ul>
<li>你好</li>
<li>你好<span>good<span>good</span></span></li>
</ul>
</div>
</body>
</html>
7.伪装选择器
分类：
超链接伪类选择器
动态伪类选择器
作用 ：
主要是针对元素的不同状态去设置样式
超链接的不同状态
访问前 :link
访问后 :visited
激活（鼠标点按不松）:active
鼠标滑过 :hover
其他元素具备
鼠标滑过 :hover
鼠标点按 :active
表单控件
获取到焦点时的状态 :focus
对文本框和密码框而言，当用户点击输入时，都视为获取焦点状态
伪类选择器需要与其他选择器结合使用，设置元素在不同状态下的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: #8e3fff;
text-decoration:none;
}
a:hover{
color: #ff45aa;
text-decoration:none;
}
a:visited{
color: greenyellow;
text-decoration:none;
}
a:active{
color:blue;
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">哈哈</a>
</body>
</html>
注意：如果要给超链接添加四种状态下的样式，必须按照以下顺序书写伪类选择器
:link
:visited
:hover
:active
简称 “爱恨原则 LoVe / HAte ”
8.属性选择器
通过元素的tpye实现CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
background-color: red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
9.伪元素选择器
在文本前后增加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在p标签前添加元素*/
p::before{
content:"抽烟";
}
/*在p标签后添加元素*/
p::after{
content:"烫头";
}
</style>
</head>
<body>
<p>喝酒</p>
</body>
</html>
#设置文本第一个字符
#通过伪元素添加内部为行内元素
5.选择器的优先级
当多个选择器的样式同时应用到一个元素上时，要按照不同选择器的优先级来应用样式。
div{
color:red;
}
#box{
color:green;
}
.c1{
color:blue;
}
<div id="box" class="c1">文本</div>
判断选择器的优先级，主要看选择器的权重（权值）数值越大，优先级越高。
选择器 权值
标签选择器 1
类选择器/伪类 10
id选择器 100
行内样式 1000
如果是复杂的选择器 （后代，子代），选择器最终的权值是各选择器权值之和
权重比较:
1.数选择器数量： id 类 标签 谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性
2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性
3.同是继承来的属性
3.1 谁描述的近，谁的优先级越高
3.2 描述的一样近，这个时候才回归到数选择器的数
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。