1-2-9【CSS3】CSS3新增选择器

题外话：时间不多了。

---

文章内容输出来源：拉勾教育大前端就业集训营

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的几种写法：

n可以是数字，数字是几，就选中第几个子元素。

n可以是关键字，even是指顺序为偶数的子元素，odd是指顺序为奇数的子元素。

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元素

    
    
    
    


    
我是一句带class属性的话
    
我是一句普通的话

说明：属性选择器选择了“带有class属性的p元素”，所以第一句话被选中了，而第二句话没有被选中。

    
    
    
    


    
我是一句带class属性的话
    
我是一句普通的话

说明：属性选择器选择了“带有class属性，且以ownP结尾的p元素”，所以第二句话被选中了。

7.选择器权重

• 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
• 伪类选择器、属性选择器的权重等于类选择器。
• 伪元素选择器的权重等于标签选择器。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉