可以根据某个属性是否存在或属性的值来寻找元素。
- <html>
- <head>
- <style type="text/css">
- abbr[title] {border-bottom:1px dotted #999;}
- abbr[title]:hover{cursor:help;}
- </style>
- </head>
- <body>
- <abbr title="Cascading Style Sheets">CSS</abbr>
- </body>
- </html>
使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式------在它们的下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问号，表示这个元素与众不同，从而提供更多的上下文相关信息。
除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用rel属性值nofollow链接的站点无法从Google获得评级收益（ranking benefit）。以下规则在这种链接旁边显示一个图像，以此表示不推荐这个目标站点：
- a[ref="nofollow"]{
- background-image:url(nofollow.gif);
- padding-right:20px;
- }
一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如，一个开发人员建议在链接的属性中中使用预定义的关键字来定义站点拥有者与其他人的关系。可以利用这一信息将一个图像应用于在rel属性中包含关键字friend的任何链接。
- a[rel~="friend"]{background-image:url(friend.gif);}
- <a href = "http://www.hicksdesign.com/" rel="friend met colleague">
- JohnHicks
- </a>
扫一扫
1712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
