选择器

CSS 选择器用于选中要应用样式的 HTML 元素。掌握选择器是学习 CSS 的基础。

基础选择器

元素选择器

选中所有指定类型的元素：

css

p {
    color: blue;
}

h1 {
    font-size: 24px;
}

div {
    margin: 10px;
}

类选择器

选中具有指定类名的元素，使用 . 开头：

css

.highlight {
    background-color: yellow;
}

.text-center {
    text-align: center;
}

html

<p class="highlight">高亮文字</p>
<p class="highlight text-center">高亮且居中</p>

ID 选择器

选中具有指定 ID 的元素，使用 # 开头：

css

#header {
    background-color: #333;
    color: white;
}

#main-content {
    padding: 20px;
}

html

<header id="header">页面头部</header>
<main id="main-content">主要内容</main>

注意

ID 在页面中应该是唯一的，不要重复使用相同的 ID。

通配符选择器

选中所有元素：

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

组合选择器

后代选择器

选中指定元素的所有后代元素，用空格分隔：

css

div p {
    color: red;
}

article h2 {
    font-size: 20px;
}

子元素选择器

选中指定元素的直接子元素，使用 >：

css

div > p {
    color: blue;
}

ul > li {
    list-style: none;
}

相邻兄弟选择器

选中紧接在指定元素后的兄弟元素，使用 +：

css

h1 + p {
    font-size: 18px;
}

通用兄弟选择器

选中指定元素后的所有兄弟元素，使用 ~：

css

h1 ~ p {
    color: gray;
}

并集选择器

同时选中多个元素，使用 , 分隔：

css

h1, h2, h3 {
    color: blue;
}

.header, .footer {
    background-color: #333;
}

交集选择器

同时满足多个条件的元素，直接连接：

css

p.highlight {
    background-color: yellow;
}

div#container {
    width: 1000px;
}

属性选择器

根据元素的属性选择：

css

/* 有指定属性 */
[disabled] {
    opacity: 0.5;
}

/* 属性等于指定值 */
[type="text"] {
    border: 1px solid #ccc;
}

/* 属性包含指定值（完整单词） */
[class~="active"] {
    color: red;
}

/* 属性以指定值开头 */
[class^="btn-"] {
    padding: 10px 20px;
}

/* 属性以指定值结尾 */
[class$="-primary"] {
    background-color: blue;
}

/* 属性包含指定字符串 */
[class*="container"] {
    max-width: 1200px;
}

伪类选择器

状态伪类

css

/* 未访问的链接 */
a:link {
    color: blue;
}

/* 已访问的链接 */
a:visited {
    color: purple;
}

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

/* 激活状态（点击时） */
a:active {
    color: orange;
}

/* 获得焦点 */
input:focus {
    border-color: blue;
    outline: none;
}

结构伪类

css

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

/* 最后一个子元素 */
li:last-child {
    border-bottom: none;
}

/* 第 n 个子元素 */
tr:nth-child(odd) {
    background-color: #f5f5f5;
}

tr:nth-child(even) {
    background-color: white;
}

tr:nth-child(3) {
    background-color: yellow;
}

/* 倒数第 n 个子元素 */
li:nth-last-child(2) {
    color: red;
}

/* 唯一子元素 */
p:only-child {
    font-size: 20px;
}

/* 第一个该类型的子元素 */
p:first-of-type {
    font-size: 18px;
}

/* 最后一个该类型的子元素 */
p:last-of-type {
    margin-bottom: 0;
}

表单伪类

css

/* 启用状态 */
input:enabled {
    background-color: white;
}

/* 禁用状态 */
input:disabled {
    background-color: #eee;
}

/* 选中状态 */
input:checked {
    accent-color: blue;
}

/* 必填字段 */
input:required {
    border-color: red;
}

/* 可选字段 */
input:optional {
    border-color: #ccc;
}

/* 验证通过 */
input:valid {
    border-color: green;
}

/* 验证失败 */
input:invalid {
    border-color: red;
}

否定伪类

css

/* 不符合条件的元素 */
p:not(.special) {
    color: gray;
}

input:not([disabled]) {
    background-color: white;
}

伪元素选择器

::before 和 ::after

在元素内容前后插入内容：

css

.quote::before {
    content: '"';
    color: gray;
}

.quote::after {
    content: '"';
    color: gray;
}

.required::after {
    content: '*';
    color: red;
}

::first-letter

选中第一个字母：

css

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}

::first-line

选中第一行：

css

p::first-line {
    font-weight: bold;
    color: blue;
}

::selection

选中用户选中的文本：

css

::selection {
    background-color: yellow;
    color: black;
}

选择器优先级

当多个选择器作用于同一元素时，优先级高的生效：

选择器	权重
`!important`	最高
行内样式	1000
ID 选择器	100
类选择器、属性选择器、伪类	10
元素选择器、伪元素	1
通配符	0

示例

css

/* 权重：1 */
p {
    color: black;
}

/* 权重：10 */
.text {
    color: blue;
}

/* 权重：100 */
#special {
    color: red;
}

/* 权重：10 + 1 = 11 */
.text p {
    color: green;
}

/* 权重：100 + 10 + 1 = 111 */
#special .text p {
    color: purple;
}

/* 最高优先级 */
p {
    color: orange !important;
}

实践示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器示例</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        
        /* 导航样式 */
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        
        nav a {
            text-decoration: none;
            color: #333;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: #eee;
        }
        
        nav a.active {
            background-color: #007bff;
            color: white;
        }
        
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        /* 表单样式 */
        input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        }
        
        input:invalid {
            border-color: #dc3545;
        }
        
        /* 卡片样式 */
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 10px 0;
        }
        
        .card::before {
            content: '📌 ';
        }
        
        .card:first-child {
            border-top: 3px solid #007bff;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    
    <main>
        <h1>用户列表</h1>
        
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>zhangsan@example.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>lisi@example.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>wangwu@example.com</td>
                </tr>
            </tbody>
        </table>
        
        <div class="card">卡片内容 1</div>
        <div class="card">卡片内容 2</div>
        
        <form>
            <input type="email" placeholder="请输入邮箱" required>
        </form>
    </main>
</body>
</html>

选择器 ​

基础选择器 ​

元素选择器 ​

类选择器 ​

ID 选择器 ​

通配符选择器 ​

组合选择器 ​

后代选择器 ​

子元素选择器 ​

相邻兄弟选择器 ​

通用兄弟选择器 ​

并集选择器 ​

交集选择器 ​

属性选择器 ​

伪类选择器 ​

状态伪类 ​

结构伪类 ​

表单伪类 ​

否定伪类 ​

伪元素选择器 ​

::before 和 ::after ​

::first-letter ​

::first-line ​

::selection ​

选择器优先级 ​

示例 ​

实践示例 ​

选择器

基础选择器

元素选择器

类选择器

ID 选择器

通配符选择器

组合选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用兄弟选择器

并集选择器

交集选择器

属性选择器

伪类选择器

状态伪类

结构伪类

表单伪类

否定伪类

伪元素选择器

::before 和 ::after

::first-letter

::first-line

::selection

选择器优先级

示例

实践示例