属性选择器：root,not,empty,target

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

CSS3属性选择器

（一）结构伪类选择器-root

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

（二）结构伪类选择器-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;

}

演示结果：

演示结果

（三）结构性伪类选择器——empty

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

（四）结构伪类选择器——target

URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素（target element）.

：target选择器称为目标选择器,可用于选取当前活动的目标元素。

示例展示

演示结果：

分析：

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

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

多个url（多个target）处理：

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

如下面例子：

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

​

​

​

Text Input:

Password Input:

​

Text Input:

Password Input:Text Input:

Password Input: