float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}
最初效果如下所示：
下面就开始针对上面列出的每个属性选择器来，具体分析其使用方法。
一、E[attr]
E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器，如：
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
上面代码所表示的，选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式，对照上面的html，我们不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如下所示：
上面是单一属性的使用，你也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中：
复制代码.demo a[href][title] {background: yellow; color:green;}
不用我说，上面的代码大家都知道是什么意思了，他表示的是选择div.demo下的同时具有href,title两个属性的a元素，并且应用相对应的样式，如下所示：
IE6不支持这个选择器。
二、Ｅ[attr="value"]
E[attr="value"]选择器和E[attr]选择器，从字面上就能很清楚的理解出来，E[attr="value"]是指定了属性值“value”，而E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。从而缩小了选择 围，更能精确选择自己需要的元素，在前面实例基础上我们进行一下简单的修改：
.demo a[id=”first”] {background: blue; color:yellow;font-weight:bold;}
和前面代码相比较，此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素，并且这个元素有一个"id="first""属性值，请看下在的效果图：
E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围：
