CSS 选择器--类型、语法和用法
有关如何使用 CSS 选择器浏览 HTML 文档的更多信息，请访问 如何使用文章 章节。本章中的文章回答了常见问题，并包含 C# 示例，提供了使用 Aspose.HTML for .NET 库解决特定任务的必要信息。
要了解如何使用 QuerySelector() 和 QuerySelectorAll() 方法来查询与 CSS 选择器匹配的 DOM 元素，请参阅文章 如何使用 CSS 选择器。在本文中，您将了解如何有效地应用选择器来选择要样式化的元素。
本文将介绍如何有效地应用选择器来选择要样式化的元素。内容包括基本选择器、组合选择器、属性选择器和伪选择器。CSS 选择器的知识对前端开发人员、网页设计师以及所有使用 CSS 和处理 (X)HTML 文档的开发人员都很有用。
CSS 选择器
CSS 选择器用于选择要设置样式的 HTML 元素，并应用一组 CSS 规则。CSS 选择器有几种不同的类型。
- 基本选择器 – Basic Selectors 根据名称、id、类别选择元素，或选择网页上的所有元素。
- 属性选择器 – Attribute Selectors 选择具有特定属性或具有指定值的属性的 HTML 元素。
- 分组选择器 – Group Selectors 选择以逗号分隔的列表分组的元素。
- 组合选择器 – Combinator Selectors 根据元素之间的特定关系选择元素。可以根据元素在标记代码中的相对位置或元素在文档对象模型中的嵌套方式来匹配元素。
- 伪选择器 – Pseudo Selectors 根据特定状态选择元素或元素的一部分。在 CSS 选择器中使用伪类，可以根据文档树中不包含的信息进行格式化。
您可以通过多种方式组合 CSS 选择器，以实现极大的针对性和灵活性。
基本选择器
基本 CSS 选择器可根据 HTML 元素的 id、类、类型选择 HTML 元素，或选择网页上的所有元素。
类型选择器或 CSS 元素选择器
类型选择器(Type Selector)或元素选择器(Element Selector)通过命名元素的类型(如 <h1>)来指定规则应适用于哪些元素。换句话说，元素选择器根据元素名称选择 HTML 元素。
CSS
1h1 {
2 text-align: center;
3 color: DarkRed;
4} HTML Example
1<h1>Aspose.HTML for .NET</h1>
2<p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.</p>
ID 选择器
ID 选择器使用 HTML 元素的 id 属性选择特定元素。如果元素的 id 属性与 ID 选择器中指定的值完全匹配，该元素就会被选中。
CSS
1#demo {
2 background-color: #fcded4;
3 font-size: 24pt;
4}HTML Example
1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>
类别选择器
类选择器可匹配具有特定 class 属性的 HTML 元素。您可以将 class 属性用于 HTML 文档 body 部分中所有有效的 HTML 元素，包括 <body> 元素本身。要选择具有特定类的元素，请在类名后写一个点(.)字符。例如，如果我们想让所有类名为 "main" 的元素具有不同的背景颜色、文本颜色和字体大小，我们可以使用以下 CSS 规则：
CSS
1.main {
2 background-color: #d4e9fc;
3 color: red;
4 font-size: 16pt;
5} HTML Example
1<h1>CSS Class Selector</h1>
2<p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.</p>
3<p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.</p>
通用选择器
通用选择器用于选择网页上的所有元素。例如，如果我们希望每个元素的文本对齐方式都居中，文本颜色都为蓝色，那么我们可以使用以下 CSS 规则：
CSS
1* {
2 text-align: center;
3 color: #0154a2;
4}HTML Example
1<h1>CSS Universal Selector</h1>
2<p>The Universal Selector selects all elements. The star symbol will target every single element on the page.</p>
属性选择器
CSS 属性选择器提供了一种简单高效的方法，可根据特定属性或属性值的存在情况，为 HTML 元素应用样式。这是一种根据特定属性对 HTML 元素进行分组，并通过属性选择器选择具有相似属性的元素，从而为 HTML 元素添加样式的好方法。将属性置于方括号中，即可创建属性选择器：
| CSS Selector | Example | Description |
|---|---|---|
| [attribute] | [translate] | Selects all elements with an attribute name of translate. |
| [attribute=value] | [translate=no] | Selects all elements with translate="no". Represents elements with an attribute name of translate whose value is exactly no. |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word flower. |
| [attribute|=value] | [lang|=de] | Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches. |
| [attribute^=value] | a[href^="#"] | Selects every <a> element whose href attribute value is prefixed, begins with "#" (internal links). |
| [attribute$=value] | a[href$=".html"] | Selects every <a> element whose href attribute value is suffixed (followed) by value, ends with ".html". |
| [attribute**=*value] | a[href*=“aspose”] | Selects every <a> element whose href attribute value contains the “aspose” anywhere in the URL. |
让我们以 CSS 属性选择器为例：
CSS
1h3[class*="1"] {
2 background-color: #b4e8fd;
3}HTML Example
1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>
组选择器
如果愿意，你可以为多个选择器设计样式。只需用逗号分隔选择器即可，如下例所示：
CSS
1h1, h2, h3 {
2 color: #36C;
3 font-family: helvetica;
4}HTML 示例
1<h1>CSS Group Selector (,)</h1>
2<h2>The defined style will apply to h1, h2 and h3 elements.</h2>
3<h3>The order of the list doesn't matter.</h3>
组合选择器
组合选择器根据元素之间的关系选择元素。CSS 中有四种不同的组合选择器：后代选择器(空格)、子代选择器(>)、相邻同级选择器(+)和一般同级选择器(~)：
| CSS Selector | Example | Description |
|---|---|---|
| element element | div p | The " " (space) Combinator selects all <p> elements that are descendants of the first <div> element. |
| element>element | div > span | The > Combinator selects all <span> elements where the parent is a <div> element. |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements. The + combinator matches the second element only if it immediately follows the first element. |
| element~element | div ~ p | The ~ Combinator selects siblings. This means that it selects every <p> element that is preceded by a <div> element. |
让我们以 CSS 组合选择器为例。子代选择器 (>) 选择指定元素的所有子代元素。与第二个选择器匹配的元素必须是与第一个选择器匹配的元素的直接子元素：
CSS
1div > p {
2 background-color: #d4e9fc;
3}HTML 示例
1<div>
2 <p>CSS Child Selector (>). Paragraph 1 is in a div.
3 <section>
4 <p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!</p>
5 </section>
6 </p>
7</div>
8<p>Paragraph 3 is not in the div at all.</p>
伪选择器
伪选择器允许根据元素在文档树中位置以外的信息对元素进行格式化。伪类和伪元素选择器前面有冒号 : 和 ::。
伪类用于定义元素的特殊状态。例如，当用户将元素悬停在其上方时，可以使用伪类为元素添加样式，或者为已访问和未访问的链接添加不同的样式。CSS 伪元素用于为元素的指定部分设计样式。例如，p::first-letter 可用于更改段落的第一个字母。
让我们以 CSS 伪元素选择器为例：
CSS
1p::first-letter {
2 font-size: 130%;
3 color: red;
4 font-family: arial;
5}HTML 示例
1<p>Pseudo-Element Selectors</p>
2<p>A CSS Pseudo-Element is used to style specified parts of an element.</p>
3<p>For example, p::first-letter can be used to change the first letter of a paragraph.</p>
Aspose.HTML 提供 HTML 网络应用程序，它是免费转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等的在线集合。这些应用程序可在任何装有网络浏览器的操作系统上运行，无需安装任何其他软件。无论你身在何处，都能轻松转换、合并、编码、生成 HTML 代码，从网络中提取数据，或从搜索引擎优化的角度分析网页。使用我们的 HTML 网络应用程序集来处理您的日常事务，让您的工作流程天衣无缝！