属性选择器-HTML+CSS实用技巧

属性选择器是一种以元素的属性为生效目标的选择器。它有以下几种格式：

1．[attr]

表示带有以attr命名的属性的元素。

动手写9.2.2 属性选择器

本例中使用了一个属性选择器，定义CSS样式只对带有标题title属性的元素生效。在页面中，第一个段落p元素带有title属性，字体颜色会改变；第二个段落p元素不带有title属性，不会受到影响。页面效果如图9.2.1所示：

图9.2.1　属性选择器

2．[attr=value]

表示带有以attr命名且值为value的属性的元素。

动手写9.2.3 带取值的属性选择器

本例中使用了一个带取值的属性选择器，只有type属性为text的元素才可以生效。因此，页面中的文本域会受影响而改变宽度和高度，密码域则不会受影响。页面效果如图9.2.2所示：

图9.2.2　 带取值的属性选择器

3．[attr～=value]

表示带有以attr命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为value。

动手写9.2.4 带子取值的属性选择器

本例中，属性选择器对含有“Morty”关键词的title属性的元素生效。页面中p元素的title属性值为“Rick and Morty”，相当于被空格分为三个词，因此会受样式影响。(www.xing528.com)

4．[attr|=value]

表示带有以attr命名的属性的元素，属性值为value或是以value-为前缀开头。典型的应用场景是匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。

动手写9.2.5 带前缀的属性选择器

本例中的属性选择器对lang属性值为“zh”和“zh-”开头的元素生效，页面中的h1元素和两个p元素都受样式影响。

5．[attr^=value]

表示带有以attr命名且值是以value开头的属性的元素。

动手写9.2.6 带开头取值的属性选择器

本例中的属性选择器对title属性值以“Ri”开头的元素生效，页面中的p元素会受这段样式的影响。

6．[attr$=value]

表示带有以attr命名且值是以value结尾的属性的元素。

动手写9.2.7 带结尾取值的属性选择器

本例中的属性选择器对title属性值以“ty”结尾的元素生效，页面中的p元素会受这段样式的影响。

7．[attr*=value]

表示带有以attr命名且值包含value的属性的元素。

动手写9.2.8 带包含取值的属性选择器

本例中的属性选择器对title属性值包含“or”的元素生效，页面中的p元素会受这段样式的影响。