在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:
CSS3属性选择器
（一）结构伪类选择器-root
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<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:
网友评论