属性选择器是通过元素的属性的特征信息来确定所选元素。 ## 14.4.1.[attr] 匹配具有所给定属性名称的标签。 其中attr是一个“示意性符号”，表示“属性名”。 比如： ``` [color] { background: yellow; } //能选中具有color属性的所有标签。 [width] { border: 1px solid red; } //能选中具有width属性的所有标签。 ``` ## 14.4.2.[attr="val"] 匹配具有某个属性且属性值为给定值的标签。 比如： ``` [color=”red”] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。 [width=”100”] { border: 1px solid red; } //能选中具有width属性且值为”100”的所有标签。 ``` ``` <hr color=”red” /> <table width=”100” >....</table> ``` ## 14.4.3.[attr~="val"] 匹配具有某个属性且属性值包含所给定单词的标签。 注意： 1，必须是一个“单词”形式，比如属性值为”a dog”，则使用”dog”可以匹配，而使用”do”不能匹配。 2，对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。 ``` <p title=”a dog”>...</p> [title~=”dog”]{ .... } //可以选中上面那个p标签 [title~=”do”]{ ..... } //选不上。。。 ``` ## 14.4.4.[attr*="val"] 匹配具有某个属性且属性值包含给定的字符的标签。 ``` <p title=”a dog”>...</p> [title*=”dog”]{ .... } //可以选中上面那个p标签 [title*=”do”]{ ..... } //也可以选上 ``` ## 14.4.5.[attr^="val"] 匹配具有某个属性且属性值以给定的字符开头的标签。 ``` <p title=”a dog”>...</p> [title^=”dog”]{ .... } //选不上 [title^=”a”]{ .... } //能选上 [title^=”a d”]{ ..... } //也可以选上 ``` ## 14.4.6.[attr$="val"] 匹配具有某个属性且属性值以给定的字符结尾的标签。