对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]( |0 {' A6 X% r+ w1 m1 u' R
{ f8 _* ?' y4 R0 J
color:red;
. E: x9 I" @! O0 r8 v5 p}7 Q* k8 N8 l, P
亲自试一试
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]7 W4 Q1 z% E. G& j9 A5 L
{4 \* ]7 g! G* N3 y+ v( l2 i# I7 n
border:5px solid blue;7 ~( X, p, ?) Z/ h
}9 J/ Y2 J7 H# g& X* j
亲自试一试
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
亲自试一试
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }亲自试一试
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
: J& I; M1 U+ z( w% ?7 q% ^{
+ r9 O2 p; n! P6 J: Z% r7 @ width:150px;: {$ J, D- ?/ o$ \, C
display:block;
7 p/ `! B# P$ }( s+ }) Z' b: l. g margin-bottom:10px;- {8 L x2 {* G, F! y F
background-color:yellow;; H. v0 T4 e& f! o& z+ j
font-family: Verdana, Arial;
& Q2 m5 ^, c; o9 U- V+ S}
3 ^* I4 l/ Q! s* f8 f
4 x. b% Q5 E, O. Y3 Jinput[type="button"]" K+ i' s: d! p; ]2 i( ]& E* i9 q( H
{. ]9 v/ q& M0 u$ a
width:120px;- L1 H: v7 c2 K3 n; O, a; h9 ~
margin-left:35px;
# f3 y, ^. t; I' o X display:block;0 K7 Z7 h! @) ]2 Q" `6 }; @
font-family: Verdana, Arial;
, `' t) M9 w& {# _}# v9 _( Y- y4 J% O; ?) F2 g
亲自试一试
发表于 11-28-2011 04:48