CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html {color:black;}, D% R6 {, q$ `. A1 l
h1 {color:blue;}3 p" H) T7 T+ p) y1 r6 J3 U) |. b
h2 {color:silver;}
' r9 v9 j2 u5 y w
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器该为 p:
html {color:black;}: n% ?; ?9 d; f. c7 {" h8 ]& i
p {color:gray;}
+ O2 q0 c! F4 e% V& Gh2 {color:silver;}
1 l. q8 t+ J! v: n0 N4 i' B
亲自试一试
类型选择器
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素:
h1 {font-family: sans-serif;}
因此,我们也可以为 XML 文档中的元素设置样式:
XML 文档:
<?xml version="1.0" encoding="ISO-8859-1"?>$ O& ]& W" b$ E/ Y
<?xml-stylesheet type="text/css" href="note.css"?>
/ t& E; T; \, T" t<note>
. Q9 ^" Q5 j1 w0 ^<to>George</to># S: t! b5 z, ]! G/ A. X0 R
<from>John</from>
( p0 S% M/ a& `3 u" m Y<heading>Reminder</heading>8 j% B* B* Y( z4 P
<body>Don't forget the meeting!</body>
( d( A: m7 m Y2 [4 x</note>5 z1 Y( M' E$ ^
CSS 文档:
note
5 z$ C0 E4 H$ R# d {
$ ?0 I' Q# l& B9 K5 D) [, D( h, k font-family:Verdana, Arial;
' R$ j6 Y D& M6 T4 q1 f% I$ {: I4 o margin-left:30px;
( J* O4 l! f8 a$ x }
; B6 J& z4 J$ _) A* h0 {4 b6 p" {% w% \' ~
to! ^6 H/ T5 v9 y4 l+ _5 Z3 o" B
{" A3 N% z, S9 |
font-size:28px; ?: N" `1 }) H/ b
display: block;
) ]' R: m- w* Q }
# G, m& B5 |0 O* O3 A& i$ P! D+ I! N* G
from7 a1 @/ n% V0 K1 P
{; F; Z: ]1 C6 ~9 R) D
font-size:28px;
- o5 E) z4 z8 m7 P+ L) F9 P7 V I display: block;
# U4 f! t2 l3 {' U# Y G }) g+ f5 T' y$ w8 M
) \4 p) u/ f+ B" v
heading
8 j6 H6 V4 X5 t# G; G. n+ a4 E {6 T o, {7 E4 G+ ~ Z
color: red;! ^. \5 l& f* [* I( p
font-size:60px;
0 |0 Y. s5 Q( R8 B- z display: block;
8 t r* D3 q0 z; t( F3 \( ^ }/ w" u) Q: J2 \* a2 f1 ~2 L
( k4 G$ J$ {4 ^ m f0 Qbody
8 P8 a# @- \+ P+ l {+ [7 {8 p6 F. V# ?7 {, G. @
color: blue;+ [4 h* [/ L: [
font-size:35px;7 |9 N" F& l- O; H' ]; P
display: block;( ?9 W, o) U! f8 H$ P4 H
}) C4 r; Z/ U2 ~7 m
查看效果
通过上面的例子,您可以看到,CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
如果您需要更多关于为 XML 文档添加样式的知识,请访问 w3school 的 XML 教程。