css3的属性选择器

[class^="icon-"]{}

选择的是所有class 以icon-开头并且这个class在第一位的元素。例如

<div class="icon-aa"></div>

,但是不会选择这样的:

<div class="aa icon-aa"></div>


下面还有几种其他的选择方式:

  • 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);

  • 随机浏览