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-开头的所有元素。