前端 CSS 选择器大揭秘💡

呆呆的心
152 阅读10分钟

在前端开发的浩瀚宇宙中，CSS（层叠样式表）宛如一颗璀璨的明星，赋予 HTML 页面绚丽多彩的外观和交互体验😎。而 CSS 选择器则是这颗明星闪耀光芒的关键所在，它就像一把神奇的钥匙，能够精准地选中 HTML 文档中的特定元素，并为其应用独特的样式。今天，就让我们一同踏上这场探索 CSS 选择器奥秘的奇妙之旅吧🚀！

一、CSS 基础概念📚

在深入了解 CSS 选择器之前，我们先来明确几个至关重要的基础概念，这些概念是构建 CSS 知识大厦的基石🧱。

1. 声明（Declaration）

一个属性与值的键值对被称为声明。它是 CSS 中最基本的组成单元，用于描述元素的具体样式特征。例如：

color: blue;

在这个声明中，color 是属性，blue 是对应的值。这行代码的作用是将元素的文本颜色设置为蓝色。

2. 声明块（Declaration Block）

声明块由花括号 {} 包围，其中可以包含多个声明。通过将多个声明组合在一起，我们可以为元素同时应用多种样式。比如：

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

在这个声明块中，包含了两个声明：color: blue; 和 font-size: 16px;。这意味着所有 <p> 元素的文本颜色将被设置为蓝色，字体大小将被设置为 16 像素。

3. 选择器（Selector）

选择器用于指定声明块所作用的元素。它就像一个精准的定位器，能够从 HTML 文档中挑选出符合条件的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 3个css rule  */
    /* css rules  css cascading style sheet */
    p {
        color: blue;
    }
    /* 最后的元素 */
    .container p {
        color: red;
    }
    #main p {
        color: green;
    }
    </style>
</head>
<body>
    <p>hello</p>
    <div id="main" class="container">
        <p>这是一个段落</p>
    </div>
</body>
</html>

这里的 p、.container p 和 #main p 都是选择器，分别会选中不同的 <p> 元素并应用相应的样式。

4. 规则集（Ruleset）

由选择器和声明块组成的整体就是规则集。规则集是 CSS 中一个完整的样式定义单元，用于描述特定元素的样式规则。1.htmlhtml` 中的代码，每个以选择器开头，后面跟着声明块的部分就是一个规则集。

二、常见的 CSS 选择器类型✨

1. 元素选择器

元素选择器是最基础、最常用的选择器之一，它通过 HTML 元素的标签名来选择元素

p {
    color: blue;
}

这里的 p 选择器会将所有 <p> 元素的文本颜色设置为蓝色。无论 <p> 元素在 HTML 文档中的位置如何，只要它的标签名是 p，就会应用这个样式。

2. 类选择器和 ID 选择器

类选择器

类选择器使用 . 符号，通过元素的 class 属性来选择元素。一个元素可以有多个类名，多个元素也可以共享同一个类名，这使得类选择器具有很高的灵活性和复用性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>标题之前的段落</p>
        <h1>标题</h1>
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <a href="#">链接</a>
        <span>这是一个span元素</span>
        <div class="inner">
            <p>这是内段落</p>
        </div>
    </div>
</body>
</html>

.container p 会选中所有 class 为 container 的元素内的 <p> 元素，并为它们添加下划线。这样，我们可以将具有相同样式需求的元素归类到同一个类中，方便统一管理和修改样式。

ID 选择器

ID 选择器使用 # 符号，通过元素的 id 属性来选择元素。每个元素的 id 属性值必须是唯一的，这意味着 ID 选择器通常用于选择单个特定的元素1.htmlhtml中的#main p`：

#main p {
    color: green;
}

它会选中 id 为 main 的元素内的 <p> 元素，并将其文本颜色设置为绿色。由于 id 的唯一性，ID 选择器的优先级通常比类选择器和元素选择器高。

3. 关系选择器

关系选择器用于根据元素之间的关系来选择元素，常见的关系选择器有相邻兄弟选择器、通用兄弟选择器和子选择器。

以这段代码为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 + p {
            color: red;
        }
        h1 ~ p {
            color: blue;
        }
        .container > p {
            font-weight: bold;
        }
        .container p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>标题之前的段落</p>
        <h1>标题</h1>
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <a href="#">链接</a>
        <span>这是一个span元素</span>
        <div class="inner">
            <p>这是内段落</p>
        </div>
    </div>
</body>
</html>

相邻兄弟选择器（+）

相邻兄弟选择器选择紧接在另一个元素之后的元素，并且这两个元素必须是同级元素

h1 + p {
    color: red;
}

它会选中紧跟在 <h1> 元素之后的第一个 <p> 元素，并将其文本颜色设置为红色。只有当 <p> 元素直接相邻于 <h1> 元素时，才会应用这个样式。

所以h1 + p会选择<p>这是第一段文字</p>

通用兄弟选择器（~）

通用兄弟选择器选择位于另一个元素之后的所有同级元素

h1 ~ p {
    color: blue;
}

它会选中 <h1> 元素之后的所有同级 <p> 元素，并将其文本颜色设置为蓝色。与相邻兄弟选择器不同的是，通用兄弟选择器不要求元素必须直接相邻。

h1 ~ p会选择<p>这是第一段文字</p>，<p>这是第二段文字</p>。

由于<p>这是内段落</p>不是同级元素和<p>标题之前的段落</p>在h1之后，不会选择。

子选择器（>）

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

.container > p {
    font-weight: bold;
}

它会选中 class 为 container 的元素的直接子 <p> 元素，并将其字体加粗。只有当 <p> 元素是 .container 元素的直接子元素时，才会应用这个样式。

.container > p会选择<p>标题之前的段落</p>，<p>这是第一段文字</p>，<p>这是第二段文字</p>。

由于<p>这是内段落</p>不是直接子元素，不会选择。

4. 伪类选择器🎉

伪类选择器用于定义元素的特殊状态或位置，它可以根据元素的行为、状态或在文档树中的位置来选择元素。常见的伪类选择器有行为伪类、状态伪类、结构伪类和条件伪类。

以此代码为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 行为伪类 */
        button:active {
            background-color: red;
            color: white;
        }
        p:hover {
            background-color: yellow;
        }
        ::selection {
            background-color: green;
            color: white;
        }
        /* 状态伪类 */
        input:focus {
            border: 2px solid red;
            outline: none;
        }
        input:checked + label {
            font-weight: bold;
        }
        /* 结构伪类 */
        li:nth-child(odd){
            background-color: lightblue;
        }
        li:nth-child(even){
            background-color: lightgreen;
        }
        /* 条件伪类 */
        li:not(:last-child){
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>伪类选择器示例</h1>
        <button>点击我</button>
        <p>鼠标悬浮在这里</p>
        <input type="text" placeholder="输入框" autofocus>
        <input type="checkbox" id="option1">
        <label for="option1">选项1</label>
        <input type="checkbox"  id="option2">
        <label for="option2">选项二</label>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
</body>
</html>

行为伪类

行为伪类根据用户与元素的交互行为来应用样式，常见的行为伪类有 :active 和 :hover 中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 行为伪类 */
        button:active {
            background-color: red;
            color: white;
        }
        p:hover {
            background-color: yellow;
        }
        ::selection {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>伪类选择器示例</h1>
        <button>点击我</button>
        <p>鼠标悬浮在这里</p>
    </div>
</body>
</html>
  • :active：当元素被激活（如按钮被点击）时应用样式。在上述代码中，当用户点击按钮时，按钮的背景颜色会变为红色，文本颜色会变为白色。
  • :hover：当鼠标悬停在元素上时应用样式。当鼠标悬停在 <p> 元素上时，<p> 元素的背景颜色会变为黄色。

状态伪类

状态伪类根据元素的状态来应用样式，常见的状态伪类有 :focus 和 :checked 中：

/* 状态伪类 */
input:focus {
    border: 2px solid red;
    outline: none;
}
input:checked + label {
    font-weight: bold;
}
  • :focus：当元素获得焦点（如输入框被选中）时应用样式。当用户点击输入框使其获得焦点时，输入框的边框会变为 2 像素宽的红色边框，并且去除默认的聚焦轮廓。
  • :checked：当复选框或单选框被选中时应用样式。当复选框或单选框被选中时，与之相邻的 <label> 元素的字体将变为加粗。

结构伪类

结构伪类根据元素在文档树中的位置来选择元素，常见的结构伪类有 :nth-child() 和 :nth-of-type 中：

/* 结构伪类 */
li:nth-child(odd){
    background-color: lightblue;
}
li:nth-child(even){
    background-color: lightgreen;
}

  • li:nth-child(odd) 会选择父元素中所有奇数位置的 <li> 元素，并将其背景颜色设置为浅蓝色；

  • li:nth-child(even) 会选择父元素中所有偶数位置的 <li> 元素，并将其背景颜色设置为浅绿；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container#demo :nth-child(3) {
        background-color: yellow    ;
        color: red;
    }
    .container p:nth-of-type(3){
        background-color: red;
        color: yellow;
    }
</style>
<body>
    <div class="container" id="demo">
        <h1>nth-child vs nth-of-type</h1>
        <p>这是第一个段落</p>
        <div>这是第一个div</div>
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <div>这是第二个div</div>
    </div>
</body>
</html>

.container#demo :nth-child(3) 会选择 class 为 container 且 id 为 demo 的元素的第三个子元素；.container p:nth-of-type(3) 会选择 class 为 container 的元素中第 3 个 <p> 元素。

条件伪类

条件伪类根据元素是否满足特定条件来选择元素，常见的条件伪类有 :not 中：

/* 条件伪类 */
li:not(:last-child){
    margin-bottom: 10px;
}

它会选择除了最后一个 <li> 元素之外的所有 <li> 元素，并为它们添加 10 像素的底部外边距。

效果图

image.png

三、选择器优先级和层叠规则🧐

在实际开发中，我们可能会为同一个元素应用多个样式规则，这时就需要了解选择器的优先级和层叠规则，以确保样式能够按照我们的预期生效。

选择器优先级

选择器的优先级决定了哪个样式规则会被优先应用。一般来说，选择器的优先级从高到低依次为：

  1. 内联样式：直接写在 HTML 元素的 style 属性中的样式，优先级最高。例如：
<p style="color: red;">这是一个段落</p>
  1. ID 选择器：使用 # 符号的选择器，优先级次之。
  2. 类选择器、属性选择器和伪类选择器：它们的优先级相同。
  3. 元素选择器和伪元素选择器：优先级最低。

层叠规则

当多个样式规则具有相同的优先级时，会遵循层叠规则来决定最终应用的样式。层叠规则主要包括以下几点：

  1. 样式表的顺序：后定义的样式会覆盖先定义的样式。例如：
p {
    color: blue;
}
p {
    color: red;
}

在这个例子中，所有 <p> 元素的文本颜色将被设置为红色，因为后定义的样式 color: red; 覆盖了先定义的样式 color: blue;。
2. 继承：子元素会继承父元素的某些样式属性，如字体、颜色等。但有些属性不会被继承，如边框、内边距等。例如：

<div style="color: blue;">
    <p>这是一个段落</p>
</div>

在这个例子中，<p> 元素会继承其父元素 <div> 的文本颜色，即蓝色。

四、总结🤝

CSS 选择器是前端开发中不可或缺的重要工具，掌握不同类型的选择器以及它们的优先级和层叠规则，可以让我们更加灵活、精准地控制页面的样式。根据上面的示例，相信大家对 CSS 选择器有了更深入的了解。在实际开发中，我们可以根据具体需求选择合适的选择器，结合 HTML 结构和 JavaScript 交互，打造出美观、易用、富有交互性的 Web 页面😘。

avatar
文章
阅读
粉丝