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

 找回密码
 注册

QQ登录

只需一步,快速开始

扫一扫,微信登陆

搜索

[DIV+CSS] CSS 元素选择器

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

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

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

GMT+8, 5-1-2025 18:04 , Processed in 0.446438 second(s), 323 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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