跳转至内容

层叠样式表/选择器

来自维基教科书，开放世界开放书籍

在 CSS 中，选择器 是规则中第一个 "{" 之前的部分，例如规则 " p { font-weight:bold; } " 中的 "p"。选择器通过指定元素的类型（例如 "div"），元素的类或元素的 id 来指定规则应该应用于哪些元素。选择器只能在链接和嵌入式 CSS 中使用，不能在内联 CSS 中使用。

下表概述了选择器。以下各节将详细讨论每种类型的选择器。

选择器概述
选择器类型 示例选择器 示例规则
类型 div div { margin:7px; padding:7px; }
类 .important .important { font-weight:bold; color:red; }
ID #onlyThisOne #onlyThisOne { font-family:courier; }
通用 * * { color:green; }
伪类 a:link a:link { color:blue; }
伪元素 p:first-letter p:first-letter { color:red }
后代 td span td span { font-weight:bold; }
分组 h1, h2, h3 h1, h2, h3 { text-align:center; }

类型

[编辑 | 编辑源代码]

这些选择器根据元素类型的名称匹配元素。上面的示例使用类型选择器使每个 p 实例都具有粗体文本。您可以将类型选择器与任何元素一起使用。以下是一些示例

 div{
   margin:7px;
   padding:7px;
 }

 body{
   background-image:url("image.gif");
   font-size:.9em;
 }

类

[编辑 | 编辑源代码]

类选择器与 (X)HTML 文档一起使用。它不适用于一般的 XML 文档，除非用户代理（Web 浏览器或其他文档阅读器）可以确定文档中元素的哪个属性是类属性。在 (X)HTML 文档中，class 被定义为类属性。

HTML 允许所有在 HTML 文档主体部分中有效的元素使用 class 属性，包括 body 元素本身。这允许 Web 设计师区分在不同上下文中使用的相同类型的元素。例如，设计师可以区分 HTML 文档中的 HTML 元素和 HTML 属性。

 The <code class="attribute">alt</code> attribute of the <code class="element">img</code>

类选择器允许您根据元素的类应用 CSS 规则。

第一种方法是创建一个全局类，可以将其添加到任何元素。您这样操作：

 .important {
   font-weight:bold; color:red;
 }

这将使任何具有 important 类的元素都变为粗体和红色。

示例 HTML

 <p class="important">Important Text</p>
 <p>Ordinary Text</p>
 <div class="important">Important Footnote</div>

示例渲染

重要文本

普通文本

重要脚注

第二种方法是将其附加到类型选择器。该规则仅应用于指定类别的给定类型的元素。

CSS 规则

 p.right {
   float:right;
   clear:both
 }

示例 HTML

 <p class="right">Righty Righty</p>

示例渲染（向右看）

对对对


一个元素可能属于多个类，例如：

 <p class="right">This paragraph belongs to the class 'right'.</p>
 <p class="important">This paragraph belongs to the class 'important'.</p>
 <p class="right important">This paragraph belongs to both classes.</p>

示例渲染

本段属于“right”类。

本段属于“important”类。

本段同时属于这两个类。


类名应描述类的目的，例如 important，而不是类的效果，例如 red。如果您按效果命名类，然后改变您想要的外观，您可能会遇到类似以下规则的情况：

 .red {color:blue}

如有必要，可以使用多个类选择器仅选择属于所有指定类的元素，例如：

p.important.right {
  border: 2px dashed #666
}

示例渲染

本段属于“right”类。

本段属于“important”类。

本段同时属于这两个类。


Internet Explorer 6 错误

[编辑 | 编辑源代码]

前例中所示的多个类选择器在 Internet Explorer 6 中不起作用。它将选择器视为仅存在最后一个类选择器，例如 p.important.right 被视为等效于 p.right。

在 Internet Explorer 6 中渲染的上述示例

本段属于“right”类。

本段属于“important”类。

本段同时属于这两个类。


完整的 HTML 文档和 CSS 样式表用于测试此错误，如下所示。

classBug.css

.important {
  font-weight:bold; color:red;
}

p.right {
  float:right;
  clear:both
}

p.important.right {
  border: 2px dashed #666
}

classBug.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <title>IE6 multiple class bug</title>
    <link rel="stylesheet" type="text/css" href="classBug.css">
  </head>
  <body>
    <p class="right">This paragraph belongs to the class 'right'.</p>
    <p class="important">This paragraph belongs to the class 'important'.</p>
    <p class="right important">This paragraph belongs to both classes.</p>
  </body>
</html>

ID

[编辑 | 编辑源代码]

ID 选择器与 (X)HTML 文档一起使用。它不适用于一般的 XML 文档，除非用户代理（Web 浏览器或其他文档阅读器）可以确定文档中元素的哪个属性是 ID 属性。在 (X)HTML 文档中，id 被定义为 ID 属性。

ID 选择器用于选择页面上的单个项目。它匹配元素的 id 属性。同一页面上的两个元素不能具有相同的 id 属性。

但是，同一站点内的几个不同网页可能会重复使用 id。它通常用于页面的主要部分，例如 mainContent、navigationBar。它通常与后代选择器结合使用，例如，对导航栏中的所有列表项进行样式化，而不会影响主要内容中的列表。

CSS 规则

 #onlyThisOne {
   font-family:courier;
 }

示例 HTML

 <p id="onlyThisOne">Courier</p>

示例渲染

Courier

通用

[编辑 | 编辑源代码]

这些选择器将样式应用于页面上的所有项目。例如，要使页面上的所有文本都变成绿色，请使用以下规则：

 * {
   color:green;
 }

伪类

[编辑 | 编辑源代码]

伪类和伪元素允许元素根据文档树中元素的位置以外的信息进行格式化。在 CSS1 和 CSS2.1 中，伪类和伪元素选择器以冒号 : 为前缀。在 CSS3 中，伪元素以 :: 为前缀。

CSS 级别 1 定义了三个伪类

链接
未访问的链接
已访问
已访问的链接
活动
活动链接

这些只能应用于锚点 (a) 元素。

 a:link{
   color:blue;
 }

 a:visited{
   color:purple;
 }

 a:active{
   color:red;
 }

CSS 级别 2.1 引入了几个额外的伪类，包括 hover。hover 可用于创建悬停效果，无需使用 Javascript。CSS2.1 还允许 active 应用于任何可以激活的元素，例如按钮。

其他 CSS 2.1 伪类是

first-child
匹配任何作为其父元素的第一个子元素的元素。
lang(...)
匹配元素的语言。语言可以直接设置在元素上，也可以从祖先元素继承。有效的语言代码必须出现在括号中，例如 en 用于任何变体的英语，或 en-gb 用于英国英语。
悬停
当用户将鼠标悬停在元素上时应用。
活动
现在允许在任何能够“活动”的元素上使用 – 当元素处于活动状态时应用。
聚焦
当元素获得键盘焦点时应用。

虽然 CSS2.1 允许在任何元素上使用 hover，但 Internet Explorer 仅允许在锚点元素上使用。

示例

  p:first-child {
    font-size:120%
  }

  span:lang(la) { /* render Latin text, e.g. per se, in italics */
    font-style:italic
  }

  li:hover { /* doesn't work in Internet Explorer */
    background-color:blue
  }

  input:active {
    color:red
  }

  input:focus {
    background-color:yellow
  }

first-child 伪类的示例在 后代 选择器部分的末尾给出。

可以指定多个伪类，例如，提醒用户他们将鼠标悬停在他们已经访问过的链接上：

a:visited:hover {
  background-color:red
}

应注意使用伪类的规则顺序。例如，如果您希望访问过的链接为绿色，但用户将鼠标悬停在它们上时应为黄色，则规则必须按以下顺序排列：

 a:visited{
   color:green
 }

 a:hover{
   color:yellow
 }

如果规则颠倒了，级联 将意味着访问过的颜色优先于悬停颜色。即使用户将鼠标悬停在访问过的链接上，它们也会保持绿色。

伪元素

[编辑 | 编辑源代码]

伪类和伪元素允许元素根据文档树中元素的位置以外的信息进行格式化。在 CSS1 和 CSS2.1 中，伪类和伪元素选择器以冒号 : 为前缀。在 CSS3 中，伪元素以 :: 为前缀。

CSS 级别 1 定义了两个伪元素 first-letter 和 first-line，它们分别选择渲染元素的第一个字母和第一行。这些可用于应用排版效果，例如，在段落开头创建首字母下沉。

 p:first-letter { color:red }

只能使用一个伪元素选择器，它必须是选择器链的最后部分。first-line 选择器只能应用于块级元素、内联块、表格标题和表格单元格。

CSS2.1 添加了另外两个伪元素，before 和 after。

从 CSS3 开始，伪元素以 :: 而不是 : 为前缀。

简单选择器

[编辑 | 编辑源代码]

上面描述的选择器（类型、类、ID、通用、伪类和伪元素）都是简单选择器的示例。简单选择器的完整语法为

  • 类型选择器或通用选择器
  • 零个、一个或多个类、ID 和伪类选择器（CSS2.1 还允许属性选择器）
  • 零个或一个伪元素选择器

以下都是简单选择器的示例

  p
  p.important
  p#navigation
  a:link
  p:first-line
  a:visited#homePage.menu2:first-letter
  *
  *#footer
  *.content.abstract
  *#mainArticle:first-letter

作为简写符号，如果通用选择器 * 不是简单选择器的唯一组成部分，则可以省略。例如，#footer 等同于 *#footer，而 :first-line 等同于 *:first-line。

组合简单选择器：可以组合简单选择器来考虑元素的上下文。例如，您可能希望仅将规则应用于导航栏中的列表元素。

后代

[编辑 | 编辑源代码]

后代选择器允许您将样式应用于嵌套在另一个指定元素内的元素。例如，您可以使每个 p 元素内的每个 span 元素都为粗体。span 可以是 p 元素的子元素，也可以是孙子元素，或曾孙子元素等。

CSS 规则

 p span{
   font-weight:bold;
 }

示例 HTML

 <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p>
 <div>Start of division. <span>This span is normal.</span> Rest of division.</div>

示例渲染

段落开始。 此跨度是粗体的。 段落剩余部分。

分区开始。 此跨度是正常的。 分区剩余部分。

下一个示例将导航部分中已访问链接的颜色更改为。文档其他部分中的已访问链接将不受影响。

CSS 规则

 ul#navigation a:visited {
   color:red
 }

示例 HTML

 <ul id="navigation">
   <li><a href="HomePage">Home</a></li>
   <li><a href="AnotherPage">A page you haven't visited yet.</a></li>
 </ul>

示例渲染

  • 首页
  • 您尚未访问的页面。

使用 first-child 选择器的示例。

CSS 规则

 div.content strong:first-child {
   color:red
 }

示例 HTML

 <div class="content">
   <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p>
   <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p>
 </div>

示例渲染

一些 强调 文本和一些 强烈强调 文本。

一些 强烈强调 文本和一些 强调 文本。

需要注意的两个要点

  • 如果元素前面有文本，则它仍然是第一个子元素，因此第一段中的 em 元素和第二段中的 strong 元素是其各自段落的第一个子元素。
  • 仅当元素匹配选择器的所有部分时，才会将规则应用于该元素。第一段中的 strong 元素是第二个子元素，因此与 strong:first-child 选择器不匹配。

分组选择器

[编辑 | 编辑源代码]

选择器可以分组为逗号分隔的列表。

h1, h2, h3 { text-align:center; }

等同于

h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:center; }

一个元素可以被多个规则选中

 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
 h1 { color: yellow; }

所有标题都将具有红色背景。2-6 级标题将具有白色文本。1 级标题将具有黄色文本。

规则的顺序很重要。在以下示例中，所有标题将具有白色文本。

 h1 { color: yellow; } 
 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }

当多个规则应用于一个元素时，级联 用于确定应用于该元素的最终样式。

后来的 CSS 版本

[编辑 | 编辑源代码]

CSS 2.1 中的附加选择器

  • 子选择器
  • 相邻兄弟选择器
  • 属性选择器
  • 更多伪类和伪元素。

CSS 3 中的附加选择器

  • 更多兄弟选择器
  • 更多属性选择器
  • 更多伪类和伪元素。
取自 "https://wikibooks.cn/w/index.php?title=Cascading_Style_Sheets/Selectors&oldid=4409340"
华夏公益教科书