CSS3中共有7种属性选择器,具体说明如下:
1.E[attr]:只使用了属性名,并没有确定任何属性值。
2.E[attr="value"]:指定了属性名,并指定了该属性的属性值。
3.E[attr~="value"]:指定了属性名,并指定了该属性的属性值,此属性值是一个词列表,并且以空格隔开,其中的词列表包含一个value值,而且“~”不可忽略。
4.E[attr^="value"]:指定了属性名,并指定了该属性的属性值,属性值是以value开头的。
5.E[attr$="value"]:指定了属性名,并指定了该属性的属性值,属性值是以value结束的。
6.E[attr*="value"]:指定了属性名,并指定了该属性的属性值,属性值中包含value。
7.E[attr|="value"]:指定了属性名,并且属性值是value或以"value"开头的值,如(zh-cn)
以下是一个简单的灯箱广告示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*灯箱外框样式*/
.pic_box{
border: solid 6px #bbb;
position: relative;
float: left;
}
.pic_box img{
width: 500px;
border: solid 1px #fff;
}
/*导航框样式*/
.nav{
background: rgb(191, 202, 206); border: 1px solid rgb(205, 207, 223); padding: 4px 12px;
float: left; opacity: 0.7; position: absolute;bottom: 6px;
right: 12px;
}
/*导航按钮样式*/
.nav a{
float: left; display: block;height: 20px;line-height: 20px;width: 20px;border-image: 10px;border-image: 10px;
border-radius: 10px;text-decoration: none;text-align: center;background: #f36;color: green;margin-left: 5px;
}
.nav a:hover{background: rgb(49, 27, 148); color: #fff;}
</style>
</head>
<body>
<div class="pic_box">
<img src="自己图片的位置"/>
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
<a href="http://www.baidu.com" class="links active item " title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item " title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item " target="_blank" lang="zh-tw">4
<a href="#5" class="links item " lang="zh-cn">5</a>
<a href="#6" class="links item " title=" website link" lang="zh">6</a>
<a href="#7" class="links item " title="open the website" lang="cn">7</a>
<a href="#8" class="links item " title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item " title="http://www.baidu.com" target="_blank" >9 </a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
</html>
由于我习惯用360,当然由于CSS版本的升级,现在几乎适配所有浏览器。
具体的例子在代码段的nav里。