这篇博客是我在b站学习狂胜说CSS时，对于CSS选择器部分进行的个人理解归纳，因为发现在测试过程中，按照狂神的代码运行有些问题，所以之后又借鉴了尚硅谷的部分教学视频进行归纳。主要包括标签选择器、类别选择器、id选择器、层次选择器（后代选择器、子选择器、相邻的兄弟选择器、通用选择器）、结构伪类选择器和属性选择器。
文章目录
1、选择器入门
在CSS中什么是选择器呢？
我们知道CSS是对网页起到美化作用的。CSS通过控制HTML中的指定元素，让这些元素的样式变成我们想要的样子，从而使整个网页看起来赏心悦目的同时，也提高我们开发网页的效率！
程序猿编写出来的CSS样式多种多样，第一种样式的字体是宋体，第二种样式的字体是楷体，如果我们网页上有一首情诗，我们想指定第一行是宋体，第二行是楷体，我们如何实现？
CSS选择器是CSS实现对HTML页面中的元素进行一对一，一对多或者多对一的控制的工具。HTML页面中的元素就是通过CSS选择器进行控制的。
每一条CSS样式定义由两部分组成，形式如下：
[code] 选择器{
样式
}[/code]。在{}之前的部分就是选择器。选择器指明了{}中的样式的作用对象，也就是样式作用于网页中的哪些元素。
<style>
p{ /*"p"就是选择器，并且是标签选择器*/
font-family:Arial,宋体;
}
</style>
2、基本选择器（重点）
2.1、标签选择器
标签选择器控制HTML中指定标签中的元素的样式。
格式：标签{}
例如，对< p >标签中元素的样式进行指定就用 p{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>民国动人情话</title>
<style>
h1{
color:red;
background:blue;
}
p{
font-family:Arial,楷体
}
</style>
</head>
<body>
<h1>
林徽因
</h1>
<p>
你是一树一树的花开
</p>
<p>
是燕在梁间呢喃
</p>
<p>
你是爱是暖是希望
</p>
<p>
你是人间的四月天
</p>
</body>
</html>
标签选择器配置的样式对所有指定标签的元素内容都生效，如果我们希望在同样的标签中的元素之间样式有区别的话，标签选择器显然不能满足我们的需求。
2.2、类别选择器class
我们可以将HTML中的元素进行分类，对于被划分为同一个类别的元素，它们的样式应该是相同的，不论标签被定义的样式如何。
格式：.类名{}
例如：.class01{}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class01{
color:red
}
.class02{
color:blue
}
.class03{
color:green
}
</style>
</head>
<body>
<p class="class01">Java从入门到精通<p>
<p class="class02">Python从入门到精通</p>
<p class="class03">C#从入门到精通</p>
</body>
类别选择器能够指定一个类别的元素都是同一个样式，但是如果我们需要让HTML中某一个单独的元素，有它独特的样式，id选择器比类别选择器更符合我们的需要。
2.3、id选择器
id选择器是CSS实现对HTML元素一对一或者多对一的重要选择器。我们通过对元素指定id,再对这个id编写单独的样式。
id必须全局唯一！
格式：#id名 {}
例如：#para1 {}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#para1{
color: red;
}
.class01{
color: green;
}
</style>
</head>
<body>
<h1 id="para1" class="class01">Java从入门到精通</h1>
<h1 class="class01">Java从入门到精通</h1>
</body>
2.4、小结
CSS的基本选择器有如下三种：
- 标签选择器
- 类别选择器class
- id选择器
基本选择器的优先级是固定的：id选择器的优先级最高，标签选择器的优先级最低。
id选择器实现了CSS对HTML元素一对一的控制；
标签选择器和类别选择器实现类CSS对HTML元素一对多的控制；
id选择器搭配上标签选择器和类别选择器可以实现CSS对HTML元素多对一的控制，比如类别选择器指定元素A的背景颜色是灰色，字体是黑体，id选择器可以指定元素A的字体大小是20px。（如果类别选择器指定了字体大小，id选择器会覆盖类别选择指定的字体大小样式）
除此之外，如果HTML网页中某个元素独霸了一个类别选择器，那么我们可以理解为类别选择器也能够实现CSS对HTML元素一对一的控制！
3、高级选择器
3.1、层次选择器
层次选择器又分为以下4种：
- 后代选择器
- 子代选择器
- 相邻的兄弟选择器
- 通用选择器
**什么是层次？**假设我们手上有10本书，那么每一本书是一个层次，书的每一页又是一个层次，每一页的每一个段落也是一个层次……
联系生活中的辈分，爷爷奶奶是一个辈分，爸爸妈妈是一个辈分，我们是一个辈分。我们可以用“辈分”这个词来理解“层次”这个词。
后代选择器
在某个元素的后面 祖爷爷->爷爷->爸爸->你
<style>
/*语法 body p{}*/
body p{
background:red;
}
</style>
body p{}这个语法可以理解为，body层级后所有p标签的元素都执行{}中的样式。
子选择器
只控制下一代，body>p就只控制body层级下的p标签
<style>
/*语法 body>p{}*/
body>p{
color:red;
}
</style>
相邻兄弟选择器
选择相邻的、同层级的指定标签元素（同辈）
<style>
/*语法 .active+p{}*/
.active+p{
background:red;
}
</style>
<body>
<p class="active">
p1
</p>
</body>
通用选择器
通用选择器选择同层级的下面的所有元素
<style>
/*语法 .active~p{}*/
background:red;
</style>
<body>
<p class="class">
p1
</p>
</body>
层次选择器测试实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body div{
color:red;
/*我爷爷到我这一代应该都是红色的字体*/
}
/*子代选择器*/
div > span{
color: blue;
/*我爸这一辈应该都是蓝色的字体*/
}
/*兄弟选择器*/
.myself + span{
color: orange;
/*我兄弟应该是橘黄色的字体*/
}
/*通用选择器*/
.sister + span{
color: brown;
/*我老妹之后的同辈份都是棕色的字体*/
}
</style>
</head>
<body>
<!--父元素
-直接包含子元素的元素叫做父元素
子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素
-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫做后代元素
-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素
-->
<div>
我爷爷
<p>
我爸
<span class="myself">我</span>
<span>我兄弟</span>
<span class="sister">我老妹</span>
<span>我表妹</span>
</p>
<span>我爸的兄弟</span>
</div>
<div>
我爷爷的兄弟
</div>
</body>
</html>
小结
层次选择器分为以下4类：
- 后代选择器 语法：父层级名 标签名{}
- 子代选择器 语法: 父层级名>标签名{}
- 相邻兄弟选择器 语法： .类名 +标签名{}
- 通用选择器 语法：.类名~标签名{}
所有选择器的作用域都是指定层级元素之后的HTML元素。
3.2、结构伪类选择器（尚硅谷笔记）
伪类是不存在的类，特殊的类。伪类用来描述一个元素的特殊状态。比如：第一个子元素、被鼠标点击的元素、鼠标移入的元素。
伪类一般情况下都是使用 : 开头
伪类有如下几个种类：
1.:first-child 第一个子元素
2.:last-child 最后一个子元素
3.:nth-child(int n) 选中第n个子元素
这个伪类有特殊值的情况：
直接输入“n” 就是选中第n个元素
输入“2n”或者“even” 表示选中偶数位的所有元素
输入“2n+1”或者“odd” 表示选中奇数位的所有元素
4.:first-of-type
5.:last-of-type
6.:nth-of-type()
特别注意：前三种伪类都是根据所有的子元素进行排序的。比如：
ul > li:first-child 指的是ul中的第一个子元素，如果ul中是这样的结构:
<ul>
<span></span>
<li></li>
<li></li>
</ul>
那么first-child指的是<span>元素，这时显示出来的结果就不会是我们预想的那样。
而后三种伪类的功能和前三种类似，不同点就在于他们是在同类型元素中进行排序，first-chile指的是第一个 < li ></ li >
测试实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*第一个子元素设置为红色*/
ul > li:first-child{
color: red;
}
/*最后一个子元素设置为蓝色*/
ul > li:first-child{
color: blue;
}
/*设置第3个元素为绿色*/
ul > li:nth-child(3){
color: green;
}
ol > li:first-of-type{
color: red;
}
ol > li:last-of-type{
color: blue;
}
ol > li:nth-of-type(2){
color: brown;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<ol>
<span>第0个</span>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
</ol>
</body>
</html>
3.3、属性选择器（重要且常用）
具有特定属性的HTML元素样式不仅仅有id和class选择器，还有属性选择器。
属性选择器根据元素的属性来定义样式，标签中如class,id,type,href等等均是元素的属性。【attr = value】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
第一种：[属性名] 选择含有指定属性的元素
第二种：[属性名=属性值] 选择含有指定属性和属性值的元素
第三种：[属性名^=属性值] 选择属性值以指定值开头的元素
第四种：[属性名$=属性值] 选择属性值以指定值结尾的元素
第五种：[属性名*=属性值] 选择属性值中含有某值的元素的元素
*/
p[title=abc]{
color: orange;
}
p[title$=hello]{
color: gray;
}
</style>
</head>
<body>
<p title="abc">床前明月光</p>
<p title="hello">疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
4、结尾
我的目标是成为Java后端工程师，因此，站在后端开发的角度，我觉得重点掌握id、class和属性选择器就可以了。其它的选择器了解即可，只要知道存在，需要的时候再翻笔记。
如果博客中出现了错误的地方，欢迎读者指正！
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
