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

你可能感兴趣的:(Web基础)