CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html {color:black;}( r" j U4 G# h, S
h1 {color:blue;}
# g$ A. O- _$ ?8 C9 m; K: Sh2 {color:silver;}# ?' x ^) @9 B' m! U6 J
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器该为 p:
html {color:black;}
) H. ]3 Q6 l% V( V+ k1 r/ \p {color:gray;}
) p" ], h; B- y+ N/ {8 ph2 {color:silver;}5 ~! \0 } O1 u
亲自试一试
类型选择器
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素:
h1 {font-family: sans-serif;}因此,我们也可以为 XML 文档中的元素设置样式:
XML 文档:
<?xml version="1.0" encoding="ISO-8859-1"?>
4 J1 T. P, b8 V- V4 T: Z5 d7 Z<?xml-stylesheet type="text/css" href="note.css"?>0 i: R) Q. g; ~. U
<note>
G$ ~3 ]) d+ e0 y* }8 R<to>George</to>
3 I* @$ [+ O+ e( x<from>John</from>
( B0 P# ~. ^; w<heading>Reminder</heading>' P% U5 y- D9 Q5 g* Z8 b
<body>Don't forget the meeting!</body>
. Z4 n$ P4 D r</note>
! j9 Z, z. I# S9 _3 m
CSS 文档:
note
5 v$ g) y8 Z w# I1 R1 j/ D+ _ {! S! a( z9 j7 t' |
font-family:Verdana, Arial;
' s f1 `. ^* x: c H! Z, O margin-left:30px;
* f+ L6 z- i1 C5 c+ D! ` }: ^/ E" T$ c9 U) F; f; W* M
" ]. C6 Q8 b0 x- ]4 F6 c
to9 _: K# s) ?2 H$ L! s& d
{& I* k9 y2 {. {5 h% ?) c
font-size:28px;
' b! E; U) L) J: H" H! Q: S9 N4 B display: block;
4 z) K5 b! H/ W( {5 h/ V, j }5 R8 h. c" V' q
& \! Q2 p% l2 Z& }$ I# q% |
from5 S0 j& @- J! p: U. @- `
{
" A/ T( ]4 K# p6 F font-size:28px;* u' ?0 I1 |4 \( ?4 @+ t3 X
display: block;
7 d" C* N: E6 A ~) B }
+ N' b5 j! d& c" V
1 f3 v# i2 J. r' s3 z+ zheading+ _% y' p2 ~: s. t: P3 x
{( m5 X) b' t" d
color: red;# l' B5 P7 z. q: F- n
font-size:60px;
7 v' c6 H E- p% w! T3 Q display: block;
, e l! B/ B9 y) Q7 `) w8 ^ }
/ b6 R; j/ b0 h: Y d: o8 ]+ n; r4 y8 [9 T Q3 e% ?' J
body
1 T& [/ l) K0 s8 ] {4 C( n$ v" a# I2 q S0 U+ t8 r
color: blue;
\. r( {4 S. U/ g font-size:35px;
, C, U$ F5 C& g$ I4 } display: block;0 N6 b, b% t" |, @ O7 [
}! w9 [+ X& V/ `) f/ l6 Q; |
查看效果
通过上面的例子,您可以看到,CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
如果您需要更多关于为 XML 文档添加样式的知识,请访问 w3school 的 XML 教程。