CSS 选择器

示例

考虑如下 CSS：

p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px Lucida Grande, Arial, Helvetica, sans-serif; } 

选择器例如："p"（文档中的 <p> 元素都会应用绿色字体的样式）、"div.warning"（文档中所有 class 包含 "warning" 的 <div> 元素都会有一个看起来像警告框的样式）和 "#customized"（id 为 "customized" 的元素中的文本为 16px 高，字体是 Lucida Grande 和一些用作回落的字体）。

我们可以把上面的 CSS 应用到 HTML 中，如下：

<p>这是个开心的文本</p> <div class="warning">小心，有巫师！他们很容易被激怒！</div> <div id="customized"> <p>这是个开心的文本</p> <div class="warning">小心，有巫师！他们很容易被激怒！</div> </div> 

页面的内容将会呈现如下样式：

参见

• 在 CSS 介绍中学习更多 CSS 选择器

• 基础选择器

  • 标签选择器 elementname
  • 类选择器 .classname
  • ID 选择器 #idname
  • 通配选择器 * ns|* *|*
  • 属性选择器 [attr=value]
  • 状态选择器 a:active, a:visited

• 分组选择器

  • 选择器列表 A, B

• 关系选择器

  • 接续兄弟选择器 A + B
  • 后续兄弟选择器 A ~ B
  • 直接子元素选择器 A > B
  • 后代元素选择器 A B

• 伪选择器（Pseudo）

  • 伪类 :
  • 伪元素 ::