2.5 属性选择符

到目前为止，我们已经学习了使用上下文选择符、ID和类选择HTML元素。再有一种选择元素的方法是属性选择符，它基于HTML标签的属性选择元素。以下是两个常见的例子。

2.5.1 属性名选择符

  1. 标签名[属性名]

选择任何带有属性名的标签名。

比如，下面的CSS

  1. img[title] {border:2px solid blue;}

会导致像下面这个带有title属性的HTML img元素显示2像素宽的蓝色边框，至于title属性有什么值，无关紧要，只要有这个属性在就行啦。

  1. <img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

什么情况下会用到这个属性选择符呢？比如，可以在用户鼠标移动到这些图片上时，此时浏览器会显示一个（利用title属性中的文本生成的）提示条。一般来说，人们经常给alt和title属性设定相同的值。alt属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而title属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。

2.5.2 属性值选择符

  1. 标签名[属性名="属性值"]

在HTML5中，属性值的引号可加可不加，在此为了清楚起见，我们加了。

选择任何带有值为属性值的属性名的标签名。

这个选择符可以让你控制到属性的值是什么。例如，这条规则

  1. img[title="red flower"] {border:4px solid green;}

在图片的title属性值为red flower的情况下，才会为图片添加边框。换句话说，下面这个img元素就会被加上边框。

  1. <img src="images/red_flower.jpg" title="red flower" alt="red flower" />

当然，属性选择符还有其他形式，感兴趣的话，就请访问http://www.stylinwithcss.com吧。

2.5.3 属性选择符的小结

基于属性名和属性的其他特征选择元素，为我们提供了另一种区别对待相同标签的机会。只要事先规划好，就可以编写出适合属性选择符的标记来。

到现在为止，我们介绍的选择符都有一个共同点，即它们针对的都是标记中的某个部分，比如标签名、类名、ID、属性或属性值。然而，使用CSS还可以在某些事件发生时，改变某些元素的样式，比如用户鼠标悬停在一个链接上。而这就要靠伪类来实现了。