CSS新增选择器（全）

今天我们来了解一下CSS新增的选择器，可以说是非常是实用，前端必会

目录

一.属性选择器：

二.结构伪类选择器（一）

三.结构伪类选择器（二） 

四.伪元素选择器

---

一.属性选择器：

element[att]:选择有att属性的元素

element[att = "val"]:选择有att属性，并且att属性值为val的元素

element[att^ = "val"]:选择有att属性，并且att属性值以val开头的元素

element[att$ = "val"]:选择有att属性，并且att属性以val结尾的元素

element[att* = "val"]:选择有att属性，并且att属性中有val值得元素

---

 

二.结构伪类选择器（一）

element：first-child:匹配父元素中第一个子元素

element：last-child:匹配父元素中最后一个子元素

element：nth-child(n):匹配父元素中第N个子元素

这里我们需要着重深入了解一下N这个值到底怎么使用：

首先：

我们可以让N等于even（选取偶数元素）、odd（选取奇数元素）、无论奇偶都是从零开始计算的

 N还可以等于2n(偶数)、2n+1(奇数)、5n(5的倍数)、n+5(从第五个开始，一直到最后，包括第五个)、-n+5(前5个，包括第五个)

---

 

三.结构伪类选择器（二） 

element：first-of-type:匹配父元素中指定类型中的第一个子元素

element：last-of-type:匹配父元素中指定类型中的最后一个子元素 

element：nth-of-type(n):匹配父元素中指定类型中的第N个子元素 

---

四.伪元素选择器

::before：在元素内部的前面创建一个新的元素（插入内容）在HTML页面中不显示

::after ：在元素内部的后面创建一个新的元素（插入内容）在HTML页面中不显示

我们这里需要注意的是，它默认创建的是行内元素，如果有需要我们可以display一下

还需要注意一点：这个伪元素必须要有content属性，可以为空，但是不能没有

这俩个伪元素选择器的权重为1

 小tip:可以使用hover和伪元素搭配：

element:hover::before{
    content='';
}

---

感谢观看，学习前端，关注小蜗