css2已经引入了一些属性选择器，css3扩展了属性选择器，基于模式匹配来定位元素

• [attr]

  Represents an element with an attribute name of attr.

  匹配具有属性名为 attr 的元素

• [attr=value]

  Represents an element with an attribute name of attr and whose value is exactly "value".

  匹配具有属性名为 attr 的属性，并且这个属性值为 value 的元素

• [attr~=value]

  Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

  匹配具有属性名为attr的属性，并且attr的属性值是用空白字符分隔的单词列表的元素。这些单词中必须有一个是value

div[class~=a]{
    background-color: pink;
}
/*选中这个元素*/
<div id="div1" class="a b"></div>
/*这个元素不会被选中*/
<div id="div2" class="b c"></div>

• [attr|=value]

  Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

  匹配具有属性名attr的属性，并且attr的属性值是value或者是以value-开头的元素。 最常用语lang属性。 ==注意：是value-开头。 value后面是一个连接符。==

• [attr^=value]

  Represents an element with an attribute name of attr and whose first value is prefixed by "value".

  属性值以value开头（value是前缀）

• [attr$=value]

  Represents an element with an attribute name of attr and whose last value is suffixed by "value".

  属性值以value结尾(value是后缀)

• [attr*=value]

  Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

  属性值中包含至少一个value(value是属性值的一个字符串)

• [attr operator value i]

  Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

  在方括号的结束的时候添加一个字母 i 或者 I ，则匹配属性值的时候会忽略大小写