HTML5与CSS3学习笔记【第九章定义选择器】

最新推荐文章于 2024-07-08 16:06:00 发布

Luminous烁

最新推荐文章于 2024-07-08 16:06:00 发布

阅读量393

点赞数

分类专栏： html5 文章标签： css3 html5 学习

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125713019

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS3中的选择器用法，包括构造选择器、按名称选择元素、按类或ID选择、按上下文选择、选择第一个或最后一个子元素、选择元素的第一个字母或第一行以及按状态选择链接元素。通过这些选择器，开发者能够更精确地控制网页元素的样式，实现更丰富的视觉效果。

摘要由CSDN通过智能技术生成

前言

CSS 样式规则有两个主要部分。选择器决定将格式化应用到哪些元素，而声明则定义要应用的格式化。最简单的选择器可以对给定类型的所有元素（如所有的 h2 标题）进行样式化，有的选择器允许我们根据元素的类、上下文、状态等来应用格式化规则。

在这里插入图片描述

9.1.构造选择器

选择器决定样式规则应用于哪些元素。例如，如果要对所有的 p 元素添加 Georgia 字体、12 像素高的格式，就需要创建一个只识别 p 元素而不影响代码中其他元素的选择器。如果要对每个区域中的第一个 p 设置特殊的缩进格式，就需要创建一个稍微复杂一些的选择器，它只识别作为页面中每个区域的第一个元素的 p 元素。选择器可以定义五个不同的标准来选择要进行格式化的元素。

元素的类型或名称。
元素所在的上下文。
元素的类或 ID。
元素的伪类或伪元素。
元素是否有某些属性和值。
为了指出目标元素，选择器可以使用这五个标准的任意组合。在大多数情况下，只使用一个或两个标准即可。另外，如果要对几组不同的元素应用相同的样式规则，可以将相同的声明同时应用于几个选择器。

最简单的选择器类型就是要格式化的元素的类型的名称（在这个例子中为 h1）

在这里插入图片描述

这个选择器使用上下文。这个样式只应用于 h1 元素中的 em 元素。其他地方的 em 元素不受影响

在这里插入图片描述

第一个选择器选择所有属于 error 类的元素。换句话说，就是所有在开始标签中包含 class=“error” 的元素。第二个选择器选择id为 gaudi 的那个元素，也就是在开始标签中指定id=“gaudi” 的元素。回忆一下，一个 id 在每个页面中只能出现一次，而一个class 可以出现任意次数。这是我们推荐 class 选择器而不推荐 ID 选择器的主要原因，你可以针对尽可能多的元素重用class选择器的样式

9.2.按名称选择元素

选择要格式化的元素，最常用的标准可能是元素的名称（也就是大家平常说的类型选择器，因为你指定了应用样式的元素的类型）。例如，可能要让所有的 h1 元素以大字号、粗体显示，让所有的 p元素以无衬线字体显示。
按照类型选择要格式化的元素
(1) 输入selector，其中selector 是目标元素的类型名称（不含任何属性）。
(2) 输入 {。
(3) 输入你希望应用到选中元素的样式，这要用属性 : 值对的形式表示。
(4) 输入 } 结束样式规则。
并非所有的选择器都需要指定元素的名称。如果对某一类的元素进行格式化，而
不管属于这个类的元素的类型，就可以从选择器中去掉元素名称。

9.3.按类或 ID 选择元素

如果已经在元素中标识了 class或 id（参见最后一条提示），就可以在选择器中使用这个标准，从而只对已标识的元素进行格式化。不过推荐使用类选择器，一会儿我会解释理由。
1. 按类选择要格式化的元素
(1) 输入 .（点号）。
(2) 不加空格，直接输入 classname，这里的classname 标识希望应用样式的类。
2. 按 id 选择要格式化的元素
(1) 输入 #（井号）。
(2) 不加空格，直接输入 id，这里的 id唯一标识希望应用样式的元素。
类选择器与 ID 选择器的比较
要在 class 选择器和 id 选择器之间作出选择的时候，建议尽可能地使用 class 选择器。这主要是因为我们可以复用 class 选择器。有人提议完全不使用 id 选择器，我赞同这种观点，并且在自己的工作中始终遵循这一点，但最终的决定权掌握在网站开发人员手中。id 选择器会引入下面两个问题。

与它们关联的样式不能在其他元素上复用（记住，在一个页面中，一个 id 只能出现在一个元素上）。这会导致在其他元素上重复样式，而不是通过 class 共享样式。
它们的特殊性比 class 选择器要强得多。这意味着如果要覆盖使用 id选择器定义的样式，就要编写特殊性更强的 CSS 规则。如果数量不多，可能还不难管理。如果处理规模较大的网站，其 CSS 就会变得比实际所需的更长、更复杂。

9.4.按上下文选择元素

在 CSS 中，可以根据元素的祖先、父元素或同胞元素来定位它们。
在这里插入图片描述

这里对 article 的一部分使用了 section元素，从而可以演示几代元素的关系。同时，对文字内容进行了压缩，这样可以更容易看清元素之间的关系。注意，在这个代码片段中，有两个第二代p 元素，它们由类名为 architect 的 article 直接包含，另外还有一个第三代 p 元素，位于第一个section（包含在article 里）。在完整的代码中还有一个第三代 p 元素，不过在这里没有显示出来。这里，所有 h2 的实例也是第三代元素。

祖先（ancestor）是包含目标元素（后代，descendant）的任何元素，不管它们之间隔了多少代。（父元素是直接包含另一个元素的元素，它们之间只隔一代，被包含的元素称为子元素。）通常对元素的子元素增加缩进，从而可以清晰地看到它们之间的关系。缩进对页面的显示没有任何影响。要实现某种效果，通常有多种构建选择器的方式可供选择。具体取决于你需要多大的特殊性。
- 按祖先元素选择要格式化的元素
(1) 输入ancestor，这里的ancestor 是希望格式化的元素的祖先元素的选择器。
(2) 输入一个空格（必不可少）。
(3) 如果需要，对后续的每个祖先元素重复第 (1) 步和第 (2) 步。
(4) 输入 descendant，这里的 descendant是希望格式化的元素的选择器。
- 按父元素选择要格式化的元素
上面的例子展示了后代结合符。CSS 也有子结合符，从而可以为父元素的直接后代（即子元素）定义样式规则。在 CSS3 之前，它们称为子选择器。
(1) 输入 parent，这里的 parent 是直接包含待格式化元素的元素的选择器。
(2) 输入 >（大于号）。
(3) 如果需要，对后续每代父元素重复第(1) 步和第 (2) 步。
(4) 输入 child，这里的 child 是要格式化的元素的选择器。
- 按相邻同胞元素选择要格式化的元素下面继续讲我们的“家族”主题。
同胞（sibling）元素是拥有同一父元素的任何类型的子元素。相邻同胞元素（adjacent sibling）是直接相互毗邻的元素，即它们之间没有其他的同胞元素。在下面这个简略的例子中，h1 和 p 是相邻同胞元素，p 和 h2 是相邻同胞元素，而 h1 和 h2 则不是相邻同胞元素。不过，它们都是同胞元素（也是body元素的子元素）。

...
<body>
 <h1>...</h1>
 <p>...</p>
 <h2>...</h2>
</body>
</html>

CSS 相邻同胞结合符（adjacent sibling combinator）可以选择直接跟在指定的同胞元素后面的同胞元素。关于 CSS3 中新出现的普通同胞结合符（general sibling combinator），参见最后一条提示。
(1) 输入sibling，这里的sibling 是包含在同一父元素中的、直接出现在目标元素前面的元素的选择器。（它们不必是同一种元素类型，只要它们彼此直接相邻就行。）
(2) 输入 +（加号）。
(3) 如有需要，对每个后续的同胞元素重复第 (1) 步和第 (2) 步。
(4) 输入element，这里的element 是要格式化的元素的选择器。

9.5.选择第一个或最后一个子元素

上一节解释了如何选择作为另一个元素的子元素的元素，举的例子是.architect > p，选择所有作为 architect 类元素的子元素的段落。不过，有时需要选择仅作为某元素第一个或最后一个子元素的元素。这时，就要用到:first-child 和:last-child 伪类。
选择某元素的第一个或最后一个子元素进行格式化
(1) 这一步可选，输入代表我们想应用样式的第一个或者最后一个子元素（如 p 或.news），参见最后一条提示。接下来千万不要有空格。
(2) 如果选择的是第一个子元素就输入:first-child，如果选择的是最后一个子元素，就输入:last-child。

9.6.选择元素的第一个字母或者第一行

我们可以分别使用:first-letter 和:first-line 伪元素只选择元素的第一个字母或第一行。
- 选择元素的第一个字母
(1) 输入element，这里的element 是要对其第一个字母进行格式化的元素的选择器。
(2) 输入 :first-letter 以选择第 (1) 步中引用的元素的第一个字母。
- 选择元素的第一行
(1) 输入element，这里的element 是要对其第一行进行格式化的元素的选择器。
(2) 输入 :first-line 以选择第 (1) 步中引用的元素的第一行。
伪元素、伪类及 CSS3 语法
在CSS3中，:first-line 的语法为 ::first-line，:first-letter 的语法为 ::firstletter。注意，它们用两个冒号代替了单个冒号。这样修改的目的是将伪元素（有四个，包括 ::first-line、::first-letter、::before 和 ::after与伪类（如 :first-child、:link、:hover 等）区分开。伪元素（pseudo-element）是 HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在 HTML 中作相应的标记。它们是另一个元素（在本例中为 p 元素）的部分内容。相反，伪类（pseudo-class）则应用于一组 HTML 元素，而你无需在 HTML 代码中用类标记它们。例如，使用 :first-child 可以选择某元素的第一个子元素，你就不用写成class=“first-child”。未来，::first-line 和 ::first-letter 这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。

9.7.按状态选择链接元素

CSS 允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系伪类实现这一特性。
按状态选择要格式化的链接元素的步骤
(1) 输入 a（a 是链接元素的名称）。
(2) 输入 :（冒号），前后都没有空格。
(3) 完成第 (2) 步以后，执行下列操作之一以表明你希望影响的链接状态：