CSS3 选择器—属性选择器

CSS3 选择器—属性选择器

属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种：

• E[attr]：只使用属性名，但没有确定任何属性值；
• E[attr=”value”]：指定属性名，并指定了该属性的属性值；
• E[attr~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
• E[attr^=”value”]：指定了属性名，并且有属性值，属性值是以value开头的；
• E[attr$=”value”]：指定了属性名，并且有属性值，而且属性值是以value结束的；
• E[attr*=”value”]：指定了属性名，并且有属性值，而且属值中包含了value；
• E[attr|=”value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

E[attr]

选择有某个属性的元素，而不管这个属性的值是什么。

E[attr="value"]

选择有某个属性的元素，并且要求这个元素的属性的属性值只能为“value”。（有且只有一个）

属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时。

属性选择器也可以多个属性并写，进一小缩小选择范围。

E[attr="value"][attr="value"]

E[attr~="value"]

表示如果有这个属性，并且这个属性包含这个值。意思是还可以有其它属性值。

如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~=”value”]。

E[attr^="value"]

选择attr属性值以“value”开头的所有元素

E[attr$="value"]

选择attr属性值以“value”结尾的所有元素

E[attr*="value"]

选择attr属性值中包含子串”value”的所有元素。

E[attr|="value"]

选择attr属性值等于value或以value-开头的所有元素。