第二章:选择器与规则
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- 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 规则将在段落内容后插入蓝色斜体的“ - 结束”文本。
【本章节完毕】