CSS3的选择器(一)

一、属性选择器

在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：

属性选择器	功能描述
E[att^ = val]	匹配元素E，且元素E定义了属性att，其属性值是以val开头的字符串
E[att$ = val]	匹配元素E，且元素E定义了属性att，其属性值是以val结尾的字符串
E[att* = val]	匹配元素E，且元素E定义了属性att，其属性值是以val包含的字符串

例如一下对a标签使用：

 



 

我的背景想变成红色
我的背景想变成红色
我的背景想变成红色

我的背景想变成绿色
我的背景想变成绿色

我的背景想变成蓝色
我的背景想变成蓝色
我的背景想变成蓝色

二、结构性伪类选择器

1. :root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。

“:root”选择器等同于元素，简单点说：

:root{background:orange}

html {background:orange;}

得到的效果等同。

2. :not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

或者除页脚”div#footer”之外的所有div设置橙色背景色。如下：

div{
  padding: 10px 20px;
  min-height: 50px;
}
div:not([id="footer"]){
  background: orange;
}

3.empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

示例显示：

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

CSS

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​

HTML

我是一个段落
 
​

4.target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

示例展示

点击链接显示隐藏的段落。

HTML代码：

#brand">Brand
id="brand">
    content for Brand

CSS代码：

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

演示结果：

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子：
html代码：  

brand">Brand
brand">
  content for Brand

jake">Brand
jake">
 content for jake

aron">Brand
aron">
    content for aron

css代码：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

上面的代码可以对不同的target对象分别设置不的样式。

5.：first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。

HTML代码：

  
Link1
  
Link2
  
link3

CSS代码：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

6.:last-child

:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

7.:nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

案例演示

  通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。

HTML代码：

  
item1
  
item2
  
item3
  
item4
  
item5
  
item6
  
item7
  
item8
  
item9
  
item10
​

CSS代码：

ol > li:nth-child(2n){
  background: orange;
}

演示结果：

8.:nth-last-child()

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

9.:first-of-type:

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

html代码：

  
我是第一个段落
  
我是第二个段落
  
我是第一个Div元素
  
我是第二个Div元素
  
我是第三个段落
  
我是第四个段落
  
我是第三个Div元素
  
我是第四个Div元素

CSS

.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
  width: 500px;
  margin: 20px auto;
}

.wrapper > p,
.wrapper > div {
  margin: 10px 0;
  background: green;
  color: #fff;
  padding: 5px;
}

.wrapper > div:first-of-type {
  background: orange;
}

显示结果是：
只有“我是第一个Div元素” 这行显示橙色。

10：nth-of-type(n)

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

示例演示

通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。

HTML代码：

  
我是一个Div元素
  
我是一个段落元素
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落
  
我是一个Div元素
  
我是一个段落

CSS代码：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

演示结果：

同样存在:last-of-type 和 nth-last-of-type(n),用法与没有last相同，不同的是从后面开始数。

11.only-child

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 也就是说只有一个子元素才能有效果。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

  
我是一个段落
  
我是一个段落


  
我是一个段落

CSS代码：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

演示结果：

12：noly-of-type

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。也就是对只有一个的类型起效果。

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码：

  
我是一个段落
  
我是一个段落
  
我是一个段落
  
我是一个Div元素


  
我是一个Div
  

    
我是一个列表项
  
  
我是一个段落

CSS代码：

.wrapper > div:only-of-type {
  background: orange;
}

演示结果：