2024-08-10发表2024-08-10更新软件开发 / CSS小白5 分钟读完 (大约815个字)0次访问

4 选择器与优先级之选择器类型

在前一篇中，我们探讨了 CSS 的基础概念以及如何在 HTML 中引入 CSS。现在，我们将深入到 CSS 最基础的组成部分之一：选择器，特别是选择器的类型及其如何影响网页的样式。

选择器的类型

CSS 选择器用于选择 HTML 文档中的元素。不同类型的选择器可以用来定位不同的元素，CSS 的强大之处在于它支持多种选择器类型。下面让我们逐一了解几种常用的选择器类型。

1. 基本选择器

基本选择器包含以下几种：

元素选择器：直接选中某个 HTML 元素。例如，要选中所有的 <p> 标签，可以使用：
1
2
3
p {
color: blue;
}
类选择器：选中所有带有特定类的元素，以点号 . 开头。对于带有类 .highlight 的元素，可以写成：
1
2
3
.highlight {
background-color: yellow;
}
ID 选择器：选中具有特定 ID 的元素，以井号 # 开头。比如，对一个 ID 为 header 的元素应用样式：
1
2
3
#header {
font-size: 24px;
}

2. 复合选择器

复合选择器是将多个选择器组合在一起，用于更精确地选中元素。

后代选择器：选中某个元素的所有后代。例如，选中 <div> 标签内所有的 <p> 标签：
1
2
3
div p {
color: green;
}
子选择器：选中某个元素的直接子元素。选中 <ul> 下的所有直接 <li> 子元素：
1
2
3
ul > li {
list-style-type: square;
}
相邻兄弟选择器：选中紧接着某个元素的下一个同级元素。比如，选中紧接在某个 <h1> 后面的 <p>：
1
2
3
h1 + p {
margin-top: 20px;
}

3. 属性选择器

属性选择器用于选择具有特定属性的元素。例如，选中所有 <input> 元素中类型为 text 的：

1
2
3

input[type="text"] {
    border: 2px solid blue;
}

4. 伪类选择器

伪类选择器用于选中特定状态的元素，如鼠标悬停时的样式。例如，当鼠标悬停在链接上时改变颜色：

1
2
3

a:hover {
    color: red;
}

使用案例

让我们来通过一个具体案例来理解选择器的使用。在下面的 HTML 中，我们将应用不同类型的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>选择器案例</title>
</head>
<body>
    <div id="header">
        <h1>欢迎来到我的网站</h1>
    </div>
    <div class="content">
        <p class="highlight">这是一个段落。</p>
        <p>这是另一个段落。</p>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li class="highlight">项目三</li>
        </ul>
    </div>
</body>
</html>

/* style.css */
#header {
    background-color: lightgray;
    padding: 20px;
}

.content p {
    font-size: 18px;
}

.highlight {
    background-color: yellow;
}

/* 子选择器 */
.content > ul > li {
    font-weight: bold;
}

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

总结

在本篇中，我们了解了 CSS 选择器的不同类型，包括基本选择器、复合选择器、属性选择器和伪类选择器。掌握这些基本选择器将为你应用 CSS 提供坚实的基础。在下一篇文章中，我们将讨论选择器的优先级，帮助你理解在冲突时，哪个样式会被优先应用。希望你能继续跟随这个教程系列，深入学习 CSS 的魅力！

4 选择器与优先级之选择器类型

https://zglg.work/css-zero/4/

作者

AI免费学习网(郭震)

发布于

2024-08-10

更新于

2024-08-10

许可协议

#CSS小白

4 选择器与优先级之选择器类型

选择器的类型

1. 基本选择器

2. 复合选择器

3. 属性选择器

4. 伪类选择器

使用案例

总结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论