CSS 选择器

CSS 基础 CSS 属性

🎯 学习 CSS 选择器

在本章节中，您将学习各种 CSS 选择器的用法，包括元素选择器、类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。

什么是 CSS 选择器？

CSS 选择器是用于选择要应用样式的 HTML 元素的模式。通过选择器，您可以精确地指定哪些元素应该应用特定的样式规则。

基本选择器

1. 元素选择器

元素选择器选择指定类型的 HTML 元素：

/* 选择所有 <p> 元素 */
p {
    color: #333;
    line-height: 1.6;
}

/* 选择所有 <h1> 元素 */
h1 {
    color: #2c3e50;
    font-size: 2rem;
}

/* 选择所有 <div> 元素 */
div {
    margin-bottom: 20px;
}

2. 类选择器

类选择器选择带有指定类的元素，以 . 开头：

/* 选择所有带有 class="button" 的元素 */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 选择所有带有 class="card" 的元素 */
.card {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* 选择所有带有 class="text-center" 的元素 */
.text-center {
    text-align: center;
}

3. ID 选择器

ID 选择器选择带有指定 ID 的元素，以 # 开头：

/* 选择带有 id="header" 的元素 */
#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

/* 选择带有 id="footer" 的元素 */
#footer {
    background-color: #222;
    color: white;
    padding: 30px;
    text-align: center;
}

/* 选择带有 id="main-content" 的元素 */
#main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

4. 通配符选择器

通配符选择器选择所有元素，以 * 表示：

/* 选择所有元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

注意：通配符选择器的优先级最低，且可能会影响性能，应谨慎使用。

5. 组合选择器

组合选择器用于选择满足多个条件的元素：

后代选择器

选择指定元素的后代元素，使用空格分隔：

/* 选择 <nav> 元素内的所有 <a> 元素 */
nav a {
    color: #333;
    text-decoration: none;
    padding: 10px;
}

/* 选择 <div> 元素内的所有带有 class="text" 的元素 */
div .text {
    font-size: 16px;
    line-height: 1.5;
}

子选择器

选择指定元素的直接子元素，使用 > 分隔：

/* 选择 <ul> 元素的直接子元素 <li> */
ul > li {
    list-style-type: none;
    margin-bottom: 10px;
}

/* 选择 <div> 元素的直接子元素 <p> */
div > p {
    font-weight: bold;
}

相邻兄弟选择器

选择指定元素的下一个相邻兄弟元素，使用 + 分隔：

/* 选择 <h1> 元素后面的第一个 <p> 元素 */
h1 + p {
    font-size: 18px;
    color: #666;
}

/* 选择 <div> 元素后面的第一个 <span> 元素 */
div + span {
    font-weight: bold;
}

通用兄弟选择器

选择指定元素后面的所有兄弟元素，使用 ~ 分隔：

/* 选择 <h2> 元素后面的所有 <p> 元素 */
h2 ~ p {
    margin-left: 20px;
}

/* 选择 <div> 元素后面的所有 <span> 元素 */
div ~ span {
    color: #ff0000;
}

属性选择器

属性选择器根据元素的属性或属性值来选择元素：

1. [attribute]

选择带有指定属性的元素：

/* 选择所有带有 title 属性的元素 */
[title] {
    border: 1px solid #ddd;
    padding: 5px;
}

/* 选择所有带有 href 属性的元素 */
[href] {
    color: #3498db;
    text-decoration: none;
}

2. [attribute=value]

选择属性值等于指定值的元素：

/* 选择所有 href 属性值为 "https://example.com" 的元素 */
[href="https://example.com"] {
    color: #27ae60;
    font-weight: bold;
}

/* 选择所有 type 属性值为 "submit" 的元素 */
[type="submit"] {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

3. [attribute^=value]

选择属性值以指定值开头的元素：

/* 选择所有 href 属性值以 "https://" 开头的元素 */
[href^="https://"] {
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 选择所有 class 属性值以 "btn-" 开头的元素 */
[class^="btn-"] {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
}

4. [attribute$=value]

选择属性值以指定值结尾的元素：

/* 选择所有 href 属性值以 ".pdf" 结尾的元素 */
[href$=".pdf"] {
    color: #e74c3c;
    font-weight: bold;
}

/* 选择所有 src 属性值以 ".jpg" 或 ".png" 结尾的元素 */
[src$=".jpg"], [src$=".png"] {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
}

5. [attribute*=value]

选择属性值包含指定值的元素：

/* 选择所有 href 属性值包含 "example" 的元素 */
[href*="example"] {
    color: #9b59b6;
    font-weight: bold;
}

/* 选择所有 class 属性值包含 "text" 的元素 */
[class*="text"] {
    font-size: 16px;
    line-height: 1.5;
}

伪类选择器

伪类选择器用于选择处于特定状态的元素，以 : 开头：

1. 状态伪类

:hover

选择鼠标悬停在上面的元素：

/* 当鼠标悬停在 <a> 元素上时 */
a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* 当鼠标悬停在 .button 元素上时 */
.button:hover {
    background-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

:active

选择被激活的元素（例如，被点击的按钮）：

/* 当 <a> 元素被点击时 */
a:active {
    color: #c0392b;
}

/* 当 .button 元素被点击时 */
.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

:focus

选择获得焦点的元素：

/* 当输入框获得焦点时 */
input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 当文本区域获得焦点时 */
textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

:visited

选择已访问的链接：

/* 选择已访问的 <a> 元素 */
a:visited {
    color: #9b59b6;
}

2. 结构伪类

:first-child

选择作为其父元素的第一个子元素的元素：

/* 选择作为其父元素的第一个子元素的 <p> 元素 */
p:first-child {
    font-weight: bold;
    color: #2c3e50;
}

/* 选择作为其父元素的第一个子元素的 <li> 元素 */
li:first-child {
    border-top: 1px solid #ddd;
}

:last-child

选择作为其父元素的最后一个子元素的元素：

/* 选择作为其父元素的最后一个子元素的 <p> 元素 */
p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 选择作为其父元素的最后一个子元素的 <li> 元素 */
li:last-child {
    border-bottom: 1px solid #ddd;
}

:nth-child(n)

选择作为其父元素的第 n 个子元素的元素：

/* 选择作为其父元素的第 2 个子元素的 <li> 元素 */
li:nth-child(2) {
    color: #e74c3c;
    font-weight: bold;
}

/* 选择作为其父元素的奇数个子元素的 <tr> 元素 */
tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* 选择作为其父元素的偶数个子元素的 <tr> 元素 */
tr:nth-child(even) {
    background-color: #f0f0f0;
}

/* 选择作为其父元素的第 3n 个子元素的 <div> 元素 */
div:nth-child(3n) {
    margin-right: 0;
}

:nth-last-child(n)

选择作为其父元素的倒数第 n 个子元素的元素：

/* 选择作为其父元素的倒数第 2 个子元素的 <p> 元素 */
p:nth-last-child(2) {
    font-style: italic;
}

/* 选择作为其父元素的倒数第 3 个子元素的 <li> 元素 */
li:nth-last-child(3) {
    color: #3498db;
    font-weight: bold;
}

:only-child

选择作为其父元素的唯一子元素的元素：

/* 选择作为其父元素的唯一子元素的 <p> 元素 */
p:only-child {
    font-size: 18px;
    color: #27ae60;
}

/* 选择作为其父元素的唯一子元素的 <div> 元素 */
div:only-child {
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 8px;
}

:first-of-type

选择作为其父元素的特定类型的第一个子元素的元素：

/* 选择作为其父元素的第一个 <p> 类型的子元素 */
p:first-of-type {
    font-weight: bold;
    color: #2c3e50;
}

/* 选择作为其父元素的第一个 <div> 类型的子元素 */
div:first-of-type {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

:last-of-type

选择作为其父元素的特定类型的最后一个子元素的元素：

/* 选择作为其父元素的最后一个 <p> 类型的子元素 */
p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 选择作为其父元素的最后一个 <div> 类型的子元素 */
div:last-of-type {
    margin-bottom: 0;
}

:nth-of-type(n)

选择作为其父元素的特定类型的第 n 个子元素的元素：

/* 选择作为其父元素的第 2 个 <p> 类型的子元素 */
p:nth-of-type(2) {
    color: #e74c3c;
    font-weight: bold;
}

/* 选择作为其父元素的奇数个 <div> 类型的子元素 */
div:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/* 选择作为其父元素的偶数个 <div> 类型的子元素 */
div:nth-of-type(even) {
    background-color: #f0f0f0;
}

伪元素选择器

伪元素选择器用于选择元素的特定部分，以 :: 开头：

1. ::before

在元素内容的前面插入内容：

/* 在 <h1> 元素内容的前面插入 "📌 " */
h1::before {
    content: "📌 ";
}

/* 在带有 class="quote" 的元素内容的前面插入引号 */
.quote::before {
    content: "\"";
    font-size: 2rem;
    color: #9b59b6;
    font-family: Georgia, serif;
}

2. ::after

在元素内容的后面插入内容：

/* 在 <a> 元素内容的后面插入 " ↗" */
a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8rem;
}

/* 在带有 class="quote" 的元素内容的后面插入引号 */
.quote::after {
    content: "\"";
    font-size: 2rem;
    color: #9b59b6;
    font-family: Georgia, serif;
}

3. ::first-line

选择元素的第一行文本：

/* 选择 <p> 元素的第一行文本 */
p::first-line {
    font-weight: bold;
    color: #2c3e50;
}

/* 选择带有 class="intro" 的元素的第一行文本 */
.intro::first-line {
    font-size: 1.2rem;
    line-height: 1.4;
}

4. ::first-letter

选择元素的第一个字符：

/* 选择 <p> 元素的第一个字符 */
p::first-letter {
    font-size: 2rem;
    font-weight: bold;
    color: #e74c3c;
    float: left;
    margin-right: 8px;
    line-height: 1;
}

/* 选择带有 class="drop-cap" 的元素的第一个字符 */
.drop-cap::first-letter {
    font-size: 3rem;
    font-weight: bold;
    color: #3498db;
    float: left;
    margin-right: 10px;
    line-height: 0.8;
}

5. ::selection

选择被用户选中的文本：

/* 选择被用户选中的文本 */
::selection {
    background-color: #ffeb3b;
    color: #2c3e50;
}

/* 选择被用户选中的 <p> 元素的文本 */
p::selection {
    background-color: #e3f2fd;
    color: #1976d2;
}

选择器优先级

当多个选择器应用于同一个元素时，优先级决定了哪个样式会被应用。优先级从高到低依次为：

内联样式（style 属性）
ID 选择器（#id）
类选择器（.class）、属性选择器（[attribute]）、伪类选择器（:hover）
元素选择器（p, div）、伪元素选择器（::before）
通配符选择器（*）
继承的样式

💡 学习提示

选择器的优先级可以通过计算 specificity（特异性）来确定。特异性越高的选择器，优先级越高。

选择器最佳实践

使用语义化选择器：优先使用元素选择器和类选择器，避免过度使用 ID 选择器
保持选择器简洁：避免使用过于复杂的选择器，提高代码的可读性和性能
使用类选择器进行样式复用：将可复用的样式定义为类，提高代码的可维护性
避免使用 !important：尽量通过提高选择器的特异性来解决样式冲突，而不是使用 !important
考虑性能：避免使用通配符选择器和过于复杂的选择器，它们可能会影响页面性能

✅ 学习进度检查

在继续学习之前，请确保您已经理解了以下内容：

基本选择器：元素选择器、类选择器、ID 选择器、通配符选择器
组合选择器：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
属性选择器：[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]
伪类选择器：状态伪类、结构伪类
伪元素选择器：::before、::after、::first-line、::first-letter、::selection
选择器优先级规则