跳转到内容

层叠样式表/选择器

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

在 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 文档正文部分中有效的元素（包括 body 元素本身）使用 class 属性。这允许 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 定义了三个伪类

link
未访问的链接
visited
已访问的链接
active
活动链接

这些只能应用于锚点 (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 用于英国英语。
hover
当用户用鼠标悬停在元素上时应用。
active
现在允许在任何能够“活动”的元素上使用 - 当元素处于活动状态时应用。
focus
当元素具有键盘焦点时应用。

虽然 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>

渲染示例

段落开头。 这个 span 是粗体的。 段落结尾。

分区开头。 这个 span 是正常的。 分区结尾。

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

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"
华夏公益教科书