CSS选择器是用于选择网页元素的模式。基本选择器帮助我们轻松地选择单个或多个元素，从而应用样式。以下是一些常用的基本选择器及其使用示例。

1. 元素选择器

元素选择器（Element Selector）选择文档中的特定元素。它使用元素的名称作为选择器。

1
2
3
4

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

示例

1
2

<p>这是第一段文本。</p>
<p>这是第二段文本。</p>

在上述代码中，所有的<p>标签将变为蓝色，并且字体大小为16px。

2. 类选择器

类选择器（Class Selector）以.开头，选择带有特定类的元素。它可以应用于多个元素。

1
2
3

.highlight {
    background-color: yellow;
}

示例

1
2

<p class="highlight">这段文本被高亮显示。</p>
<p>这段文本没有高亮。</p>

在这个例子中，只有带有类highlight的段落会有黄色背景。

3. ID选择器

ID选择器（ID Selector）以#开头，用于选择具有特定ID的单个元素。每个ID应该在文档中是唯一的。

1
2
3
4

#main-title {
    text-align: center;
    font-size: 24px;
}

示例

1

<h1 id="main-title">这是主标题</h1>

在这里，<h1>元素通过ID选择器被居中并且字体大小设置为24px。

4. 通用选择器

通用选择器（Universal Selector）使用星号（*）表示，它会选择文档中的所有元素。

1
2
3
4

* {
    margin: 0;
    padding: 0;
}

示例

1
2
3
4

<div>
    <p>这是段落1</p>
    <p>这是段落2</p>
</div>

在这个例子中，所有元素的margin和padding都被重置为0，以避免浏览器的默认样式干扰。

5. 属性选择器

属性选择器（Attribute Selector）根据元素的属性和属性值选择元素。

1
2
3

input[type="text"] {
    border: 1px solid #ccc;
}

示例

1
2

<input type="text" placeholder="请输入文本" />
<input type="checkbox" />

在这个例子中，只有type属性为text的输入框会被应用边框样式。

6. 组合选择器

组合选择器允许我们结合多种选择器。例如，div p选择位于<div>中的所有<p>元素。

1
2
3

div p {
    color: red;
}

示例

1
2
3
4

<div>
    <p>这个段落是红色的。</p>
</div>
<p>这个段落是默认颜色。</p>

在这个例子中，只有包裹在<div>中的<p>会呈现红色。

总结

基本选择器是CSS中最基本的部分，它们允许我们根据元素的类型、类、ID、属性及其组合来选择和样式化元素。掌握这些选择器有助于我们更灵活地控制网页布局和设计。通过灵活地运用这些选择器，我们可以实现复杂而又美观的网页设计。

组合选择器是CSS中一种强大的选择器，允许我们根据元素之间的关系来选择元素。它们可以帮助我们提高样式的灵活性与可控性。组合选择器主要包含以下几种类型：

1. 子选择器 (>)

子选择器用于选择某个元素的直接子元素。例如，我们想要选中所有<ul>元素的直接<li>子元素，可以使用如下代码：

1
2
3

ul > li {
    color: blue;
}

示例

1
2
3
4
5
6
7
8
9

<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Subitem 2.1</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

在这个例子中，只有“Item 1”、“Item 2”和“Item 3”会变为蓝色，因为它们是<ul>的直接子元素，而“Subitem 2.1”不会受到影响。

2. 兄弟选择器 (+ 和 ~)

2.1 相邻兄弟选择器 (+)

相邻兄弟选择器用于选择紧接在某个元素后面的兄弟元素。例如，我们希望给每个紧跟<h1>之后的<p>添加样式：

1
2
3

h1 + p {
    font-style: italic;
}

示例

1
2
3

<h1>标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

在这个示例中，只有第一个<p>会是斜体，因为它是第一个<h1>的相邻兄弟。

2.2 通用兄弟选择器 (~)

通用兄弟选择器用于选择所有在某个元素之后的兄弟元素。例如，选中所有在<h2>后面的<p>：

1
2
3

h2 ~ p {
    color: green;
}

示例

1
2
3

<h2>章节标题</h2>
<p>段落一。</p>
<p>段落二。</p>

在这个例子中，所有在<h2>之后的<p>都会变为绿色。

3. 后代选择器（空格）

后代选择器用于选择某个元素内部的所有后代元素。比如，我们想让所有在<div>中的<span>变为红色：

1
2
3

div span {
    color: red;
}

示例

1
2
3
4
5
6

<div>
    <p>文本 <span>红色文本</span></p>
    <div>
        <span>另一个红色文本</span>
    </div>
</div>

在这里，所有在<div>中的<span>都会变为红色。

4. 组合多个选择器

我们还可以将多个组合选择器结合起来，以达到更复杂的选择效果。例如，选择所有在<ul>中并且是<li>的子元素的<span>：

1
2
3

ul > li span {
    font-weight: bold;
}

示例

1
2
3
4
5

<ul>
    <li>Item 1 <span>重要</span></li>
    <li>Item 2</li>
    <li>Item 3 <span>关键</span></li>
</ul>

在这个例子中，只有“重要”和“关键”这两个<span>会变为粗体字。

总结

组合选择器为我们提供了灵活的方式来选择元素和定义样式。掌握它们能够让我们的CSS更加高效和逻辑清晰。通过使用组合选择器，可以精确地控制不同层级和关系的样式应用，使得网页设计更具可维护性和可读性。

在 CSS 中，伪类 和 伪元素 是使样式更具表现力和灵活性的工具。本文将详细讲解它们的概念、如何使用，以及常见的案例。

伪类

伪类 用于选择处于特定状态的元素。它们通过在选择器后添加冒号 : 来定义。

常见伪类

1. :hover

   • 当用户悬停在元素上时应用样式。
   • 示例：

     1 2 3 4

     a:hover { color: red; text-decoration: underline; }

   • 这里，当用户将鼠标悬停在链接上时，链接的颜色会变为红色。

2. :focus

   • 当元素获得焦点时应用样式，通常用于表单元素。
   • 示例：

     1 2 3

     input:focus { border: 2px solid blue; }

   • 在此示例中，当输入框获得焦点时，其边框颜色会变为蓝色。

3. :nth-child()

   • 选择特定的子元素，允许选择一系列元素。
   • 示例：

     1 2 3

     li:nth-child(odd) { background-color: #f0f0f0; }

   • 上述代码会使每个奇数编号的列表项的背景色变为浅灰色。

4. :first-child 和 :last-child

   • 选择父元素的第一个或最后一个子元素。
   • 示例：

     1 2 3 4 5 6 7

     p:first-child { font-weight: bold; } p:last-child { color: green; }

   • 在这个例子中，父元素中的第一个段落将是粗体，而最后一个段落的颜色会变成绿色。

伪元素

伪元素 本质上是选中元素的某个特殊部分。它们通过在选择器后添加双冒号 :: 来定义（早期版本使用单冒号 :）。

常见伪元素

1. ::before

   • 在元素内容之前插入内容。
   • 示例：

     1 2 3 4

     h1::before { content: "Title: "; font-style: italic; }

   • 在这个例子中，所有的 <h1> 元素前都会加上 “Title: “ 的内容，并且是斜体。

2. ::after

   • 在元素内容之后插入内容。
   • 示例：

     1 2 3 4

     p::after { content: " ✔"; color: green; }

   • 这个例子表示每个段落的后面都将附加一个绿色的勾选符号。

3. ::first-line

   • 选择元素的第一行文本。
   • 示例：

     1 2 3 4

     p::first-line { font-weight: bold; text-transform: uppercase; }

   • 在这里，每个段落的第一行将会被设置为粗体并且转换为大写字母。

4. ::first-letter

   • 选择元素的第一个字母。
   • 示例：

     1 2 3 4

     p::first-letter { font-size: 2em; float: left; }

   • 上述代码将段落的第一个字母放大，并让其漂浮在左侧。

小结

通过正确使用 伪类 和 伪元素，我们可以丰富网站的表现力和用户体验。现代网页设计常常依赖这些技术来创造引人注目的效果。我们应当充分掌握这些 CSS 工具，以提升我们的前端开发能力。