对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]6 i& G5 |) D( W# M
{; j. s G2 N# E, v
color:red;, {3 J3 R3 v1 ~( u7 G8 K- _
}
0 z/ Q( }; z0 v. A
亲自试一试
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]! t# c! |" }1 }, e9 C' a
{
& e7 a- y2 d+ o0 x# Q% @5 Fborder:5px solid blue;8 u7 m h2 [5 z1 Z; g
}
' [. E, W d8 ~' n( E; O; d
亲自试一试
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
亲自试一试
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }亲自试一试
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]% h4 E( w; F/ i% w5 _$ i
{
) B$ t3 j, [/ a, F' j* f width:150px;
' N- `. g- E) y N display:block;
' B: N" H9 B3 }" f5 J4 V margin-bottom:10px;
* D& L$ X6 Y+ n9 ?: Q1 K background-color:yellow;5 n5 b& @" o6 n& e' D# R
font-family: Verdana, Arial; _0 c$ B2 k8 [: y4 ^" q/ Y4 {
} ^ ^7 G4 |. i4 h2 \( ~
t( ], P' C; Rinput[type="button"]& W9 T) ~/ C" y' G O
{
7 |7 N$ `* U+ s) a; n& ` width:120px;; E. L6 g& P7 u, n, L& z
margin-left:35px;
0 U' P, K& L0 p6 u* p/ A' V0 b* h display:block;. n: t7 d* ]+ J% e
font-family: Verdana, Arial; |+ p/ v! P ? l% R( N; d, s
}: C. Q" N+ ]0 b0 C( J
亲自试一试
发表于 11-28-2011 04:48