CSS 选择器全面详解

公告

View Post

引言

CSS 选择器是 CSS 的核心组成部分，用于选择 HTML 元素并为其应用样式。选择器的种类繁多，合理使用它们可以极大地提高开发效率和代码的可维护性。本文将全面介绍 CSS 的常见选择器，并通过示例代码帮助读者深入理解。

一、CSS 选择器的分类

CSS 选择器可以分为以下几类：

基本选择器
- 标签选择器
- 类选择器
- ID 选择器
- 通配符选择器
组合选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
属性选择器
伪类选择器
伪元素选择器

接下来，我们将逐一介绍这些选择器。

二、基本选择器

1. 标签选择器（Element Selector）

通过 HTML 标签名称选择元素。

示例：

p {
    color: blue;
}

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

2. 类选择器（Class Selector）

通过元素的 class 属性选择元素。

示例：

.highlight {
    background-color: yellow;
}

<p class="highlight">这是一个高亮段落。</p>
<div class="highlight">这是一个高亮 div。</div>

3. ID 选择器（ID Selector）

通过元素的 id 属性选择元素。ID 在页面中应该是唯一的。

示例：

#header {
    font-size: 24px;
}

<div id="header">这是页头。</div>

4. 通配符选择器（Universal Selector）

选择页面中的所有元素。

示例：

* {
    margin: 0;
    padding: 0;
}

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

三、组合选择器

1. 后代选择器（Descendant Selector）

选择某个元素的后代元素。

示例：

div p {
    color: red;
}

<div>
    <p>这是一个红色段落。</p>
</div>

2. 子选择器（Child Selector）

选择某个元素的直接子元素。

示例：

div > p {
    color: green;
}

<div>
    <p>这是一个绿色段落。</p>
    <section>
        <p>这个段落不会被选中。</p>
    </section>
</div>

3. 相邻兄弟选择器（Adjacent Sibling Selector）

选择某个元素的下一个相邻兄弟元素。

示例：

h1 + p {
    color: purple;
}

<h1>标题</h1>
<p>这是一个紫色段落。</p>
<p>这个段落不会被选中。</p>

4. 通用兄弟选择器（General Sibling Selector）

选择某个元素之后的所有兄弟元素。

示例：

h1 ~ p {
    color: orange;
}

<h1>标题</h1>
<p>这是一个橙色段落。</p>
<p>这也是一个橙色段落。</p>

四、属性选择器

通过元素的属性选择元素。

示例：

/* 选择所有带有 title 属性的元素 */
[title] {
    color: blue;
}

/* 选择 title 属性值为 "example" 的元素 */
[title="example"] {
    background-color: yellow;
}

/* 选择 href 属性以 "https" 开头的元素 */
a[href^="https"] {
    color: green;
}

/* 选择 src 属性以 ".png" 结尾的元素 */
img[src$=".png"] {
    border: 2px solid red;
}

<p title="example">这是一个带有 title 属性的段落。</p>
<a href="https://example.com">这是一个链接。</a>
<img src="image.png" alt="图片">

五、伪类选择器

用于选择元素的特定状态。

示例：

/* 鼠标悬停时 */
a:hover {
    color: red;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
    color: blue;
}

/* 第 n 个子元素 */
li:nth-child(2) {
    background-color: yellow;
}

<ul>
    <li>第一个项目</li>
    <li>第二个项目</li>
    <li>最后一个项目</li>
</ul>
<a href="#">这是一个链接。</a>

六、伪元素选择器

用于选择元素的特定部分。

示例：

/* 选择段落的第一行 */
p::first-line {
    font-weight: bold;
}

/* 选择段落的首字母 */
p::first-letter {
    font-size: 24px;
    color: red;
}

/* 在元素内容前插入内容 */
p::before {
    content: "前缀：";
    color: green;
}

/* 在元素内容后插入内容 */
p::after {
    content: "（后缀）";
    color: blue;
}

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

七、综合示例

以下是一个综合示例，展示了多种选择器的使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器综合示例</title>
    <style>
        /* 标签选择器 */
        p {
            color: blue;
        }

        /* 类选择器 */
        .highlight {
            background-color: yellow;
        }

        /* ID 选择器 */
        #header {
            font-size: 24px;
        }

        /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 后代选择器 */
        div p {
            color: red;
        }

        /* 伪类选择器 */
        a:hover {
            color: green;
        }

        /* 伪元素选择器 */
        p::first-letter {
            font-size: 30px;
            color: purple;
        }
    </style>
</head>
<body>
    <div id="header">这是页头。</div>
    <p>这是一个蓝色段落。</p>
    <p class="highlight">这是一个高亮段落。</p>
    <div>
        <p>这是一个红色段落。</p>
    </div>
    <a href="#">这是一个链接。</a>
</body>
</html>

结论

CSS 选择器是 Web 开发中不可或缺的工具。通过本文的详细介绍和示例代码，相信您已经对 CSS 选择器有了更全面的理解。在实际开发中，灵活运用这些选择器可以极大地提高代码的可读性和可维护性。希望本文对您有所帮助！

posted on 2025-01-13 13:02 周政然阅读(1800) 评论(0) 收藏举报

刷新页面返回顶部

奋斗的软件工程师

公告

View Post