1. 属性选择器
属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性,这样所有使用该属性——而不管它的值——的这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。
有6个不同类型的属性选择器:
- [att=value]
该属性有指定的确切的值。
- [att~=value]
该属性的值必须是一系列用空格隔开的多个值,(比如,class=”title featured home”),而且这些值中的一个必须是指定的值”value”。
- [att|=value]
属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符,也就是“value-”。(比如lang=”zh-cn”)
- [att^=value]
该属性的值以指定值开始。
- [att$=value]
该属性的值包含指定的值(而无论其位置)。
- [att*=value]
该属性的值以指定的值结束
比如,如果你想要改变你的博客上的日志部分元素的背景颜色,你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器:
div[class|="post"] { background-color: #333; }
该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注:此处英文原文有些上下文不对应,我已经更正——译者,神飞)
属性选择器的另一个很有用的用处是定位不同类型的input元素。比如,如果你想让你的文本输入框使用一个特定的宽度,你可以使用下面的属性选择器:
input[type="text"] { width: 200px; }
这将匹配所有type属性值等于“text”的input元素。
现在我们可能像为网站上不同的文件类型的链接添加不同的图标,这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现:
a[href*=".jpg"] { background: url(jpeg.gif) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=".pdf"] { background: url(pdf.gif) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=".doc"] { background: url(word.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }
在此例中,我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》
浏览器支持
除了Internet Explorer 6,所有的主流浏览器都支持属性选择器。这意味着,如果你在你的网站上使用了属性选择器,你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子,为链接添加图标可以给你的网站带来另一个级别的可用性,但是如果这些链接不显示任何图标,该网站仍然还是可用的。
出处:前端观察
责任编辑:bluehearts
上一页 征服高级CSS选择器 [1] 下一页 征服高级CSS选择器 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|