国外设计欣赏网站 - DOOOOR.com

 找回密码
 注册

QQ登录

只需一步,快速开始

扫一扫,微信登陆

搜索

[DIV+CSS] CSS 元素选择器

[复制链接]
发表于 11-28-2011 05:29 | 显示全部楼层 |阅读模式

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 教程

|2011-2026-版权声明|平台(网站)公约|DOOOOR 设计网 ( 吉ICP备2022003869号 )

GMT+8, 2-21-2025 08:14 , Processed in 1.091925 second(s), 305 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表