题外话：时间不多了。
文章内容输出来源：拉勾教育大前端就业集训营
1.新增选择器
-
概述：在之前的文章1-1-10中，为大家介绍了7种选择器，我们来回顾一下：
- 4个基础选择器：标签选择器、id选择器、类选择器、通配符选择器。
- 3个高级选择器：后代选择器、交集选择器、并集选择器。
-
说明：CSS3中，相对于CSS2.1版本的7个选择器，增加了更多其他的选择器，实现了更多的选择方式。
- 子级选择器
- 兄弟选择器
- 结构伪类选择器
- 伪元素选择器
- 属性选择器
2.子级选择器
- 概述：子级选择器用于选取带有特定父元素的元素。
- 书写方式：element1>element2，其中element1是父元素，element2是子元素。
- 注意事项：必须满足父子关系才可以，仅满足祖先关系是不行的！
说明：第一个p元素与box1类的div元素是父子关系，所以被选择器选中了。第二个p元素，虽然是祖先关系，但不是父子关系，所以没有被选中。
回顾：子级选择器和后代选择器有些相似，不同点在于，子级选择器必须是父子关系，而后代选择器，是祖先关系即可。
3.兄弟选择器
- 概述：兄弟选择器有两种，“相邻兄弟选择器”和“其他兄弟选择器”。
| 选择器 | 简介 |
|---|---|
| element1+element2 | 匹配同一个父元素中，紧跟在element1后面的一个element2元素 |
| element1~element2 | 匹配同一个父元素中，在element1后面所有的element2元素 |
相邻兄弟选择器
- 概述：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
- 书写方式：E1+E2。
-
注意：
- 选中的是紧跟在E1元素后的同级E2元素。
- 只能选中E1元素后面的1个E2元素。
- “+ ”符号前后可添加空格书写。
说明：只有第一个p元素满足“紧跟在h2元素后”，所以只有第一个p元素被选中了。
说明：第一个p元素不满足“紧跟在h2元素后”，因为紧跟在h2元素后的是div元素，所以没有任何一个p被选中。
说明：该案例比较特殊，因为从第二个p标签开始，都满足选择器的条件，所以都被选中了。
其他兄弟选择器
- 概述：其他兄弟选择器匹配同一个父元素中在element1后面的所有element2元素。
- 书写方式：E1~E2。
-
注意：
- 选择element1之后出现的所有element2。
- 两种元素必须拥有相同的父元素，但是element2 不必直接紧随element1。
- ~ 符号前后可以添加空格书写。
说明：第一个p元素并没有满足在h2的后面，所以没有被选中。从第二个p元素开始，都满足条件，所以都被选中了。
说明：第三个p标签由于和h2标签不是同一个父元素，所以没有被选中。
4.结构伪类选择器
- 概述：结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E中的第一个 |
| E:last-of-type | 指定类型E中的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
E:first-child和E:last-child
- 概述：匹配父元素中的第一个or最后一个子元素E。
-
书写方式：
- 完整写法：父元素 子元素:first-child
- 省略子元素：父元素 :first-child
注意！ 省略子元素写法，在冒号前面，必须有一个空格！完整写法，在冒号前面，不能有空格！
说明：第一个选择器的意思是，类名为box的父元素中的第一个子元素p，满足条件。第二个选择器的意思是，类名box的父元素中的第一个子元素h2，但是！h2在其子元素中排行第2，所以并不符合条件！
说明：该写法为“省略子元素写法”，仅指定了一个类名为box的父元素，没有指定子元素，所以只要是父元素的第一个子元素就满足条件。
拓展：一般来说使用“省略子元素写法”即可，因为一旦子元素写错了，是不会有任何元素被选中的。
E:nth-child(n)
- 概述：匹配父元素中的第n个子元素E。
-
书写方式：
- 完整写法：父元素 子元素:nth-child(n)
- 省略子元素：父元素 :nth-child(n)
说明：与first-child选择器类似，一旦指定了子元素，要满足两个条件才能被选中，所以一般使用省略子元素写法。
说明：选择器中没有指定子元素，所以子元素中的第三个元素满足条件，被选中了。
- n的几种写法：
<style>
.box :nth-child(3){
color: pink;
}
</style>
n可以是数字，数字是几，就选中第几个子元素。
<style>
.box :nth-child(even){
color: pink;
}
</style>
n可以是关键字，even是指顺序为偶数的子元素，odd是指顺序为奇数的子元素。
<style>
.box :nth-child(2n+5){
color: pink;
}
</style>
n可以是公式，其中n是从0开始计算的整数。在本案例中，2n+5的意思是从5开始的奇数。
E:first-of-type和E:last-of-type
- 概述：指定父元素中所有类型为E的子元素，并选中他们的第一个or最后一个。
-
书写方式：
- 完整写法：父元素 子元素:first-of-type
- 省略子元素：父元素 :first-of-type
说明：完整写法指定了子元素，所以会从类名为box的父元素中，筛选所有h2子元素，选中他们中的第一个。
说明：没有指定子元素，就会将父元素中所有种类的元素的第一个选中。
E:nth-of-type(n)
- 概述：选择父元素中的所有类型为E的子元素中的第n个。
-
书写方式：
- 完整写法：父元素 子元素:nth-of-type(n)
- 省略子元素：父元素 :nth-of-type(n)
说明：这里只举省略子元素写法的例子。由于没有指定子元素，所以选中了所有类型子元素中的第二个。
- E:nth-of-type(n)中的n与E:nth-child(n)中的n类似，直接套用即可，不过多介绍了。
5.伪元素选择器
-
概述：在DOM里新生成了一个元素，选中的是这个新元素，类似于标签选择器的效果，在DOM中无法选中这个新元素，所以叫做伪元素。
-
新增选择器：
| 选择器 | 介绍 |
|---|---|
| E::before | 在E元素内部的前面插入一个元素 |
| E::after | 在E元素内部的后面插入一个元素 |
| E::first-letter | 选择到了E容器的第一个字母 |
| E::first-line | 选择到了E容器内的第一行文本 |
拓展：H5新规范，伪元素选择器采用双冒号写法。当然，目前浏览器对于单冒号和双冒号都是兼容的。
说明：before会在其子元素中的，最前面插入一个元素；而after会在其子元素中的，最后面插入一个元素。
结构伪类选择器8.jpg
说明：first-letter会在选中E容器中文本内容的第一个字母；first-line会选中在E容器中文本内容的第一行内容，“第一行”的范围由实际显示效果决定。
你会发现缩小or放大浏览器窗口大小，选中的文字范围也不同。
-
注意事项：
- 伪元素只能给双标签添加，不能给单标签添加；
- 伪元素冒号前不能有空格；
- 伪元素必须写上属性content；
- 在DOM中是看不到新建的元素的，所以称为伪元素。
6.属性选择器
- 概述：属性选择器用来选择包含指定属性的标签。
- 选择器介绍：
| 选择器 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性，且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性，且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性，且值中含有val的E元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[class]{
color: pink;
}
</style>
</head>
<body>
<p class="p1">我是一句带class属性的话</p>
<p>我是一句普通的话</p>
</body>
</html>
说明：属性选择器选择了“带有class属性的p元素”，所以第一句话被选中了，而第二句话没有被选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p[class$="ownP"]{
color: pink;
}
</style>
</head>
<body>
<p class="myPFlag">我是一句带class属性的话</p>
<p class="unkownP">我是一句普通的话</p>
</body>
</html>
说明：属性选择器选择了“带有class属性，且以ownP结尾的p元素”，所以第二句话被选中了。
7.选择器权重
- 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
- 伪类选择器、属性选择器的权重等于类选择器。
- 伪元素选择器的权重等于标签选择器。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，愿与诸君共勉
网友评论