CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html {color:black;}5 I/ K; D6 R! ^. X6 U; E
h1 {color:blue;}
2 V; \4 U3 _5 k2 _$ v: `9 ~1 U- fh2 {color:silver;}/ O& E( r6 T3 \4 S
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器该为 p:
html {color:black;}
5 y. {( ~8 f- ^6 P8 np {color:gray;}
( Q |) Q/ Q( X% e! o0 b1 `
h2 {color:silver;}
# j W- L- a8 X4 r: V$ O3 a$ L
亲自试一试
类型选择器
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素:
h1 {font-family: sans-serif;}
因此,我们也可以为 XML 文档中的元素设置样式:
XML 文档:
<?xml version="1.0" encoding="ISO-8859-1"?>
* T7 ], x2 u! ^# J<?xml-stylesheet type="text/css" href="note.css"?>
& z$ x% ?6 `0 w3 t& @) {<note>
0 n5 o) O* c$ Y2 a; v/ m: H# F: O<to>George</to>/ W0 Z- h. T( h" c" p. a
<from>John</from># p0 U5 P0 \2 E) \: ?
<heading>Reminder</heading>$ m5 e' w' {' `
<body>Don't forget the meeting!</body> f: p7 t7 N$ W4 S3 V' |
</note>3 u) O, z: \: `' ?- q# q! ?
CSS 文档:
note
- o8 J p, M; P! U/ t {
5 v( \: ^" t1 x! I3 y8 ^7 @4 j font-family:Verdana, Arial;
4 U1 i6 { D/ }, c: Z' t4 ? margin-left:30px;2 o& N9 E9 o3 A: h. Q* u
}
% c# B' v) Z1 X, r5 F0 @+ Y
/ J6 d) o7 U& v5 E$ v8 Oto- l( G- D3 H' t! B- s& R% Z
{
. N) M6 G3 Z# A, C# x) G ?3 u7 `5 z font-size:28px;# S4 s# \+ K: O* B! n
display: block;
# n# f. ]. Q0 B: u. n }' ]* v* ~% C6 d7 |2 B1 G8 Q
, I+ B) m5 H" \, x* C
from
6 G# s! b6 l% G1 Y8 t0 e6 v! c {
$ L# w% C+ D' u% c; L7 {; [5 W font-size:28px;" L! A: T: x5 v$ s0 e; G
display: block;2 M2 b( i$ Q. `9 T5 k0 o2 ^
}: j. V* [, F3 ^: \% a( q: `8 A
2 X% `+ ]- S) Y# z3 B4 X8 g
heading! m8 z) G9 @9 B) V( X# N
{1 I4 `: ^; Y+ j+ Q) N" j
color: red;2 j/ f8 @8 @2 j, Z" g: D
font-size:60px;
: F1 ^, p2 Q1 g6 y display: block;
) R6 {+ x5 ~; F* z3 Z }
$ ^) ~/ h |& d) {) a* {/ F9 Z' P
s! a3 c/ M, A, [. r4 t$ r# J+ Dbody
1 ]2 w4 S1 T( Q$ o {
& p7 D2 g( c) @' Q9 J color: blue;) W9 z! L6 s% T
font-size:35px;
* q! i8 j2 P' f. s7 v display: block;
& d$ A2 N( z& ]" I) H }7 H$ T3 Z9 G7 ~8 o9 l# r
查看效果
通过上面的例子,您可以看到,CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
如果您需要更多关于为 XML 文档添加样式的知识,请访问 w3school 的 XML 教程。