65.《css3 新增选择器-详细篇》

---

title: 15.css3x新增选择器-详细篇
date: 2021-03-07 21:39:36

---

css3新增选择器

1、属性选择器

（1）css2中的属性选择器

• element[attr] 选中元素具有属性为 attr 的元素

  • div[class]{
       color: red;
    } 
    

• element[ attr = val ] 选择具有指定属性名称为 attr 且属性值必须为value的元素(只能选中第一次出现的元素)

  • div[class='box']{
    	color:red;
    }
    

• element[ attr ~= val ] 选中所有attr的属性值为 val 的元素

  • div[ class ~= 'box' ]{
    	color:red;
    }
    

(2) css3中新增的属性选择器

• element[ attr ^= val ] 选择属attr属性以 val 开头的元素

  • div[class ^= 'box']{
    	color:red;
    }
    

• element[ attr $= val ] 选择属attr属性以 val 结尾的元素

  • div[class $= 'box']{
    	color:red;
    }
    
    

• element[attr*=value] 选择属性 attr 包含 value 的所有元素

  • div[class *= 'box']{
    	color:red;
    }
    
    

2、结构性伪类选择器

（1）first-child

​ 选择父元素中的第一个子元素E

ul li:first-child{
	background:red;
}

（2）last-child

​ 选择父元素中的最后一个子元素E

ul li:last-child{
	background:red;
}

（2）nth-child()

选择父元素中的第n个子元素E

n的取值可以是数字、关键词或者表达式

• 数字

  ul li:nth-child(5) { background-color: red; }
  

• 关键词 odd奇数 even偶数

  ul li:nth-child(odd) { 
     background-color:
     blueviolet; 
  }
  
  ul li:nth-child(even) {
     background-color: pink; 
  }
  

• 表达式

  ul li:nth-child(2n+1) { 
      background-color: yellow; 
  }
  

（4）nth-last-child()

E:nth-last-child(n){}

选择父元素中倒数第n个子元素E

n的取值可以是数字、关键词、表达式

注意：

nth-child和nth-last-child，先计算第几个节点，在匹配选择器

/* li:nth-last-child(3) { 
background-color: blueviolet; 
} */ 

/* 
li:nth-last-child(odd) { 
   background-color: coral;    
} 
 li:nth-last-child(3n) { 
     background-color: cornflowerblue; 
}
*/

（5) nth-of-type()

:nth-of-type(n)

匹配属于父元素的特定类型的第 n 个子元素

/* 
.wrap div.box:nth-of-type(1) {
     background-color: cyan; 
}
*/ 
/* 
.wrap p.box:nth-of-type(odd) {
      background-color: pink; 
}
*/
.wrap .box:nth-of-type(2n) { 
   background-color: green; 
}

（ 6 ） nth-last-of-type()

:nth-last-of-type(n)

匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

注意：

nth-of-type和nth-last-of-type，先将父元素中的元素按照标签名称分类，然后计算第几个节点，再匹

配选择器

3、状态伪类选择器

（1）enabled

E:enabled{}

匹配用户界面上处于可用状态的元素

（2）disabled

E:disabled{}

匹配用户界面上处于禁用状态的元素

（3）checked

E:checked{}

匹配用户界面上处于选中状态的元素

input[type="text"]:enabled { 
     background-color: darkseagreen; 
}
input[type="text"]:disabled {
      background-color: yellow; 
}
input[type="radio"]:checked + span{ 
      background-color: deeppink;
}