屬性選擇器是通過元素的屬性的特征信息來確定所選元素。 ## 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"] 匹配具有某個屬性且屬性值以給定的字符結尾的標簽。