logo

第二章:选择器与规则

作者
Modified on
Reading time
5 分钟阅读:..评论:..

基础选择器

在这一章中,我们将深入探讨 CSS 中的基础选择器以及它们的使用方法。选择器是 CSS 的基础,通过选择器,我们可以灵活地选择和定义我们希望样式化的 HTML 元素。

元素选择器

元素选择器用于选择 HTML 文档中的所有某一类型的元素。例如,下面的 CSS 规则将应用于所有的 <p> 元素:

p { color: blue; font-size: 14px; }

在这个例子中,所有的段落元素都会被设置为蓝色字体和 14 像素的字体大小。

类选择器

类选择器使用 HTML 元素的 class 属性来选择元素。通过类选择器,我们可以为多个不同的元素应用相同的样式。类选择器以一个点(.)开头,后跟类名,例如:

.highlight { background-color: yellow; font-weight: bold; }

在 HTML 中使用该类:

<p class="highlight">这是一段高亮文本。</p> <span class="highlight">这是一个高亮的<span></span></span>

以上 CSS 规则将会为所有包含 highlight 类的元素设置黄色背景和加粗字体。

ID 选择器

ID 选择器使用 HTML 元素的 id 属性来选择元素,ID 在文档中是唯一的。ID 选择器以井号(#)开头,后跟 ID 名,例如:

#header { background-color: lightgrey; padding: 10px; }

在 HTML 中使用该 ID:

<div id="header">这是标题部分。</div>

以上 CSS 规则将会为 ID 为 header 的元素设置浅灰色背景和 10 像素的内边距。

组合选择器

组合选择器允许你通过组合多个选择器来更精确地选择元素。组合选择器的使用可以极大地增强 CSS 规则的灵活性。

后代选择器

后代选择器选择某一元素内的所有符合条件的后代元素。语法是通过空格分隔的两个选择器,例如,div p 选择所有位于 div 内的所有 p 元素:

div p { color: green; }

在 HTML 中:

<div> <p>这是一个段落,将被选中。</p> </div> <p>这是另一个段落,不会被选中。</p>

以上 CSS 规则将会为位于 div 内的段落元素设置为绿色字体。

子选择器

子选择器选择某一元素内的直接子元素。语法是通过 > 分隔的两个选择器,例如,ul > li 选择 ul 元素内的直接 li 子元素:

ul > li { list-style-type: square; }

在 HTML 中:

<ul> <li>直接子元素列表项</li> <li>直接子元素列表项</li> <ul> <li>嵌套子元素列表项,不会被选中</li> </ul> </ul>

以上 CSS 规则将会为 ul 的直接 li 子元素设置方形的列表样式符号。

相邻兄弟选择器

相邻兄弟选择器选择紧接在另一个元素之后的兄弟元素。语法是通过 + 分隔的两个选择器,例如,h1 + p 选择紧接在 h1 之后的 p 元素:

h1 + p { margin-top: 0; }

在 HTML 中:

<h1>标题</h1> <p>紧接在 h1 后面的段落,将被选中。</p> <h1>另一个标题</h1> <div> <p>嵌套的段落,不会被选中。</p> </div>

以上 CSS 规则将会为紧接在 h1 之后的段落元素设置无上边距。

通用兄弟选择器

通用兄弟选择器选择一个元素后面的所有兄弟元素。语法是通过 ~ 分隔的两个选择器,例如,h1 ~ p 选择 h1 之后的所有 p 元素:

h1 ~ p { color: darkred; }

在 HTML 中:

<h1>标题</h1> <p>将被选中的段落。</p> <p>这也是一个将被选中的段落。</p> <div> <p>嵌套的段落,不会被选中。</p> </div>

以上 CSS 规则将会为 h1 之后的所有兄弟段落元素设置深红色字体。

伪类与伪元素

伪类和伪元素是选择器中的特殊类型,用于选择特定的元素状态或部分。它们在许多情况下非常有用,尤其是在交互式设计中。

常见伪类

伪类用于选择元素的特定状态。常见的伪类包括 :hover, :active, 和 :focus 等。

:hover

当用户将鼠标悬停在某个元素上时,hover 伪类将会应用样式。例如:

a:hover { color: red; }

在 HTML 中:

<a href="#">悬停在此链接上,将变为红色。</a>

以上 CSS 规则将会在用户将鼠标悬停在链接上时,将链接的颜色变为红色。

:active

当某个元素被激活(通常是被点击时),active 伪类将会应用样式。例如:

button:active { background-color: darkblue; }

在 HTML 中:

<button>点击我</button>

以上 CSS 规则将会在用户点击按钮时,将按钮的背景颜色变为深蓝色。

:focus

当某个元素获得焦点时,focus 伪类将会应用样式。例如:

input:focus { border-color: green; }

在 HTML 中:

<input type="text" placeholder="点击我" />

以上 CSS 规则将会在输入框获得焦点时,将输入框的边框颜色变为绿色。

常见伪元素

伪元素用于选择元素的某一部分或生成特定内容。常见的伪元素包括 ::before::after 等。

::before

::before 伪元素用于在某个元素的内容前插入内容。例如:

p::before { content: "注意: "; color: red; font-weight: bold; }

在 HTML 中:

<p>这是一个段落。</p>

以上 CSS 规则将在段落内容前插入红色加粗的“注意: ”文本。

::after

::after 伪元素用于在某个元素的内容后插入内容。例如:

p::after { content: " - 结束"; color: blue; font-style: italic; }

在 HTML 中:

<p>这是一个段落。</p>

以上 CSS 规则将在段落内容后插入蓝色斜体的“ - 结束”文本。

【本章节完毕】