CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]
9 [4 F' e) P( ?9 U6 C7 k{
, a6 {: N% N' s) `/ E5 m, Q8 l- d; \color:red;
1 c$ N, _$ n$ v! {* m2 K; ~}

亲自试一试

属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
8 y) W& t) U8 b/ k{
1 Y- f- c  Y5 A0 y+ x1 n6 iborder:5px solid blue;
3 u; x: e4 q: [}
* S- r/ G1 d; V! f& [1 R. F

亲自试一试

属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

亲自试一试

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

亲自试一试

设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
2 K( [# ~8 {$ o{
  width:150px;
& o9 x* q5 _' U+ \" O  display:block;
- o- ^" t8 |# L* }+ c  |  margin-bottom:10px;
4 T8 L* P* V: w$ a$ Q+ o& s! L  background-color:yellow;
  font-family: Verdana, Arial;
}

7 e5 {2 x0 U( k0 P% zinput[type="button"]
  [/ h/ w" M! I) Y+ E, w$ q- ?% ^{
, e0 G) y5 b# c6 K, ^/ K: v  width:120px;
  margin-left:35px;
  display:block;
) y6 B9 G$ y, W4 V! D  font-family: Verdana, Arial;
4 o" z8 V& _9 d}

亲自试一试