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

 找回密码
 注册

QQ登录

只需一步,快速开始

扫一扫,微信登陆

搜索

[DIV+CSS] CSS 元素选择器

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

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

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

GMT+8, 11-12-2025 02:05 , Processed in 0.287043 second(s), 310 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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