前端必看 | 零基础入门 | 你真的懂CSS选择器吗?

CSS（层叠样式表）是网页设计的核心语言之一，而选择器则是CSS的基石。本文将带你全面了解CSS选择器的世界，通过简单易懂的解释和实际代码示例，让你快速掌握各种选择器的使用方法。

一、CSS选择器基础：认识选择器

CSS选择器的作用是"选择"HTML元素并为其应用样式。就像在人群中找人一样，我们需要不同的"识别方式"来找到特定的元素。

CSS 定义：层叠样式表，用于选择 HTML DOM 元素并应用样式规则。
引入方式
- 内联标签（<style>） ：在 HTML 文件的 <head> 标签内使用 <style> 标签编写 CSS 代码。
- 外联样式（<link>） ：通过 <link> 标签引入外部 CSS 文件。
- 行内样式 ：直接在 HTML 元素的 style 属性中编写 CSS 代码。
渲染流程：先下载样式，再解析 DOM 并应用样式，DOM 与 CSS 结合形成渲染树（render tree），最后通过浏览器渲染引擎渲染得到页面。

渲染树示意图

1. 基本选择器类型

标签选择器 - 通过HTML标签名选择元素：

css 复制代码

p {
  color: blue;
}

这会选择页面中所有的<p>段落元素，并将文字颜色设为蓝色。

类选择器 - 通过class属性选择元素：

css 复制代码

.highlight {
  background-color: yellow;
}

在HTML中使用：<p class="highlight">这段文字会高亮</p>

ID选择器 - 通过id属性选择唯一元素：

css 复制代码

#header {
  font-size: 24px;
}

在HTML中使用：<div id="header">网站标题</div>

二、CSS选择器优先级：谁说了算？

当多个样式规则作用于同一个元素时，浏览器如何决定应用哪个样式呢？这就涉及到优先级的概念。

优先级权重计算规则：

标签选择器：1
类选择器：10
ID选择器：100
行内样式：1000
!important：最高优先级

让我们看一个实际例子：

html 复制代码

<div class="container" id="main">
  <P style="color: pink;">我看看怎么个事!</P>
</div>

css 复制代码

p {
  color: blue !important;
}
.container p {
  color: red;
}
#main p {
  color: green;
}

虽然行内样式权重最高(1000)，但!important具有最高优先级，所以最终文字显示蓝色。如果没有!important，则行内样式的粉色会生效。

实例与展示

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        /* 1(样式) */
        /* 如果一定要显示蓝色 */
        /* !important 很重要 */
        p {
            color: blue !important;
        }
        /* 10(类) + 1(样式) */
        .container p {
            color: red;
        }
        /* 100(id) + 1(样式) */
        #main p {
            color: green;
        }

    </style>
</head>
<body>
    <div class="container" id="main">
        <P style="color: pink;/* 1000 */">我看看怎么个事!</P>
    </div>
</body>
</html>

三、组合选择器：精准定位元素

1. 后代选择器（空格）

选择某个元素内部的所有特定后代元素：

css 复制代码

.container p {
  text-decoration: underline;
}

这会选择.container内部的所有<p>元素，无论嵌套多深。

2. 子元素选择器（>）

只选择直接子元素：

css 复制代码

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

这只会选择.container直接子元素中的<p>，不会选择嵌套在其他元素中的<p>。

3. 相邻兄弟选择器（+）

选择紧接在某个元素后的第一个兄弟元素：

css 复制代码

h1 + p {
  color: red;
}

这会让紧跟在<h1>后的第一个<p>变为红色。

4. 通用兄弟选择器（~）

选择某个元素后面的所有同级元素：

css 复制代码

h1 ~ p {
  color: blue;
}

这会让<h1>后面的所有<p>兄弟元素变为蓝色。

实例与展示

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 相邻兄弟选择器 */
        /* 得分为2 */
        h1+p{
            color: red;
        }
        /* 通用兄弟选择器 */
        /* 得分为2 */
        h1~p{
            color: blue; 
        }
        /* 子元素选择器 直接子元素*/
        /* 用于选择.container元素内的段落文本 */
        .container >p{
                font-weight: bold;
        }
        .container p{       
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>标题</h1>
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <a href="">链接</a>
        <span>这是一个span元素</span>
        <div class="inner">
            <p>这是一个内部段落</p>
        </div>
    </div>
</body>
</html>

四、伪类选择器：元素的状态选择

伪类选择器允许我们根据元素的状态或位置来应用样式。

1. 交互状态伪类

css 复制代码

/* 鼠标悬停时 */
p:hover {
  background-color: yellow;
}

/* 按钮被点击时 */
button:active {
  background-color: red;
  color: white;
}

/* 输入框获得焦点时 */
input:focus {
  border: 2px solid blue;
}

2. 结构伪类

css 复制代码

/* 选择奇数位置的列表项 */
li:nth-child(odd) {
  background-color: lightgray;
}

/* 选择除最后一个外的所有子元素 */
li:not(:last-child) {
  margin-bottom: 10px;
}

3. 表单相关伪类

css 复制代码

/* 复选框被选中时改变相邻标签颜色 */
input:checked + label {
  color: blue;
}

实例与展示

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>
        /* 伪类选择器 */
        button:active{
            background-color: red; 
            color: white;
        }
        p:hover{
            background-color: yellow;
        }
        /* 鼠标选中文本的效果 */
        ::selection{
            background-color: blue;
            color: white;
        }
        /* 输入框的效果 */
        input:focus{
            border: 2px solid blue;
            outline: none; /* 移除浏览器默认outline */
            accent-color: blue;  /* 设置复选框选中标记颜色 */
        }
         /* 复选框的效果 */
        input:checked + label{
            color: blue;
        } 
        li:nth-child(odd){
            background-color: lightgray;
        }
        li:not(:last-child){
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>伪类选择器示例</h1>
        <button>点击我</button>
        <p>鼠标悬浮在这里</p>
        <input type="text" placeholder="输入框">
        <input type="checkbox" id="option1">
        <label for="option1">选项1</label>
        <input type="checkbox" id="option2" checked>
        <label for="option2">选项2</label>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
</body>
</html>

五、易错点一------组合选择器的优先级计算

下面我们来看一个题目

js 复制代码

.container ul li:nth-child(odd)

这个选择器的优先级是多少?

答案为10+1+1+10=22

因为:nth-child(odd)是伪类选择器，优先级是10

六、易错点二------nth-child vs nth-of-type：关键区别

这两个选择器经常让人困惑，让我们通过一个例子来理解它们的区别：

html 复制代码

<div class="container">
  <h1>nth-child vs nth-of-type 例子</h1>
  <p>这是第一个段落</p>
  <div>这是一个div</div>
  <p>这是第二个段落</p>
  <p>这是第三个段落</p>
  <div>这是第二个div</div>
</div>

css 复制代码

/* 选择.container下第3个子元素，且这个元素必须是<p>标签 */
.container p:nth-child(3) {
  background-color: yellow;
}
/* 实际不会生效，因为第3个子元素是div不是p */

/* 选择.container下第3个<p>类型的元素 */
.container p:nth-of-type(3) {
  background-color: lightblue;
}
/* 这会选择"这是第三个段落" */

关键区别：

nth-child(n)：选择父元素的第n个子元素，且必须是指定类型
nth-of-type(n)：选择父元素下第n个指定类型的子元素（忽略其他类型元素）

结语

CSS选择器是前端开发的基石，掌握它们能让你更精准地控制页面样式。通过本文的学习，你应该已经了解了各种选择器的基本用法和区别。记住，实践是最好的老师，多写代码、多尝试，你会很快掌握这些知识！

希望这篇指南能帮助你更好地理解CSS选择器。如果有任何问题，欢迎在评论区留言讨论！