CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:
html {color:black;}
3 M6 o; @% Z7 N) P9 T. Ch1 {color:blue;}
" d9 u7 s# `% Ph2 {color:silver;}; J" O, N4 a) y' x
亲自试一试
可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器该为 p:
html {color:black;}5 X! t; w7 H! N0 K" b0 K9 ^
p {color:gray;}
1 k& W3 [4 x$ A8 U& @- {, I: H3 ch2 {color:silver;}
5 s0 \, M( Y/ ]- N; z2 I) o
亲自试一试
类型选择器
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。
“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素:
h1 {font-family: sans-serif;}
因此,我们也可以为 XML 文档中的元素设置样式:
XML 文档:
<?xml version="1.0" encoding="ISO-8859-1"?>
/ h) Y# c* y. |2 ^ H# G<?xml-stylesheet type="text/css" href="note.css"?>
# O g% F ]8 B$ q+ g. e) q& e
<note>' ^0 P# G+ X7 l
<to>George</to>
+ Q) l9 O7 K. R<from>John</from>; }- U5 q3 m Y Q0 R Q
<heading>Reminder</heading>
/ ~$ P' D: `0 @) v3 v# n+ B<body>Don't forget the meeting!</body>: M0 P" v) b: X) @
</note>& C) o# ]6 h' _ Q6 `; v& J7 S) N( k- Q
CSS 文档:
note& `# |3 t$ e" \ S1 i
{
( E$ ? J/ `0 ^; C9 A& w1 W font-family:Verdana, Arial;
* d @8 B6 g6 L2 [2 m' S# G7 f margin-left:30px;4 K k# s! b0 f: U8 `
}+ i0 |% m* m" B# A
& ^# d8 }2 A# g: E8 z, ]6 pto
' k6 h3 `% n9 w2 a {
- a7 v( f; ?1 m3 {6 t& Z font-size:28px;% I5 a3 v- B4 K, {2 j/ z0 x
display: block;& `( K! f2 j9 \
}
! H2 C* W. q% H, Z* l" W2 r! ~# f0 y
. k) n1 [: Z$ o$ ifrom X4 Q( @& n+ D; j
{
6 c% w/ h5 q8 B font-size:28px;" c2 E% n0 ?/ z* k7 h; T$ Q& r
display: block;
5 }- `7 V) v; {5 t% \ }! M# Z* C" ~1 b/ N3 j" Z G
1 ~5 e: ]9 }1 f* @# Nheading$ R& M4 G4 O* |* h2 w2 v- W4 [
{
O- ]& z9 D- J! M% W2 L color: red;3 Y- I$ U- e8 y, J& d
font-size:60px;
1 \' Z4 U( s8 r# @; ] display: block;. c9 H! o1 ?) s% r$ r* m
}
7 k6 H/ S( }' J
9 Q! ~. X3 A. R. ~. N3 n) Ebody& u- T* V1 I" k! L9 w* v
{
; o% i4 ?) p0 b. ?3 V. g color: blue;! G6 j q5 i! k- k9 D/ F& Z
font-size:35px;
5 n4 n3 O4 A9 @' T# w- Y, Z! k* B) K display: block;
% T, K, K j! b/ T }* I' g9 p( q; R" [$ v* P" I! m
查看效果
通过上面的例子,您可以看到,CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
如果您需要更多关于为 XML 文档添加样式的知识,请访问 w3school 的 XML 教程。