3. CSS3 新增选择器

CSS3 进阶

一、新增选择器

1. 属性选择器（权重为10）

   ​ E[att] 有该属性的元素

   ​ E[att="val"] 属性与属性值必须完全匹配的元素

   ​ E[att^="val"] 该属性的属性值以val开头的元素

   ​ E[att$="val"] 该属性的属性值以val结尾的元素

   ​ E[att*="val"] 该属性的属性值包含val的元素

   p[class$="p2"] {
   	background-color: red;
   }
   

2. 结构伪类选择器（权重10）

   element:first-child 选择父元素的第一个子元素 element

   element:last-child 选择父元素的第一个子元素 element

   element:nth-child(1) 选择父元素的第一个子元素 element

   element:nth-child(an+b) 选择父元素的第一个子元素 element。an+b 其中a,b是一个整数,n是一个自然数从0开始 an+b整体结果>=1

   :nth-child()表示父元素下的第n个子元素

   :nth-of-type()表示父元素下的第ｎ个类型的元素

   例子：

   li:first-child {
   background-color: green;
   }
   
   li:last-child {
   background-color: burlywood;
   }
   
   li:nth-child(1) {
   font-size: 40px;
   }
   
   li:nth-child(-n+3) {
   	text-decoration: underline;
   }
   
   li:nth-child(3n) {
   	background-color: green;
   }
   
   li:nth-child(odd) {
   	background-color: red;
   }
   
   p:first-of-type {
   	color: orange;
   }
   

3. 伪元素选择器（权重为1）

   语法：selector::pseudo-element {property:value;}

   :before 伪元素在元素之前添加内容

   :after 伪元素在元素之后添加内容

   伪元素是行内元素，必须有content属性

   .box::before {
       content: "我是css添加内容";
       background-color: red;
       width: 100px;
       height: 100px;
       display: inline-block;
   }
   
   .box::after {
       content: "";
       background-color: blue;
       width: 100px;
       height: 100px;
       display: inline-block;
   }