CSS选择器全局归纳

这篇博客是我在b站学习狂胜说CSS时，对于CSS选择器部分进行的个人理解归纳，因为发现在测试过程中，按照狂神的代码运行有些问题，所以之后又借鉴了尚硅谷的部分教学视频进行归纳。主要包括标签选择器、类别选择器、id选择器、层次选择器（后代选择器、子选择器、相邻的兄弟选择器、通用选择器）、结构伪类选择器和属性选择器。

文章目录

1、选择器入门
2、基本选择器（重点）
- 2.1、标签选择器
- 2.2、类别选择器class
- 2.3、id选择器
- 2.4、小结
3、高级选择器
- 3.1、层次选择器
- - 后代选择器
  - 子选择器
  - 相邻兄弟选择器
  - 通用选择器
  - 层次选择器测试实例
  - 小结
- 3.2、结构伪类选择器（尚硅谷笔记）
- 3.3、属性选择器（重要且常用）
4、结尾

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和属性选择器就可以了。其它的选择器了解即可，只要知道存在，需要的时候再翻笔记。

如果博客中出现了错误的地方，欢迎读者指正！