属性选择器

1. [attr]

匹配具有所给定属性名称的标签。

其中attr是一个“示意性符号”，表示“属性名”。

比如：

[color] { background: yellow; } //能选中具有color属性的所有标签。

[width] { border: 1px solid  red; } //能选中具有width属性的所有标签。

1. [attr="val"]

匹配具有某个属性且属性值为给定值的标签。

比如：

[color=”red”] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。

[width=”100”] { border: 1px solid  red; } //能选中具有width属性且值为”100”的所有标签。

<hr  color=”red” />

<table  width=”100”  >....</table>

1. [attr~="val"]

匹配具有某个属性且属性值包含所给定单词的标签。

注意：

1，必须是一个“单词”形式，比如属性值为”a  dog”，则使用”dog”可以匹配，而使用”do”不能匹配。

2，对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。

<p  title=”a  dog”>...</p>

[title~=”dog”]{ .... } //可以选中上面那个p标签

[title~=”do”]{ ..... } //选不上。。。

1. [attr*="val"]

匹配具有某个属性且属性值包含给定的字符的标签。

<p  title=”a  dog”>...</p>

[title*=”dog”]{ .... } //可以选中上面那个p标签

[title*=”do”]{ ..... } //也可以选上

1. [attr^="val"]

匹配具有某个属性且属性值以给定的字符开头的标签。

<p  title=”a  dog”>...</p>

[title^=”dog”]{ .... } //选不上

[title^=”a”]{ .... } //能选上

[title^=”a  d”]{ ..... } //也可以选上

1. [attr$="val"]

匹配具有某个属性且属性值以给定的字符结尾的标签。