CSS 选择器

CSS 基础 CSS 属性

🎯 学习 CSS 选择器

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

什么是 CSS 选择器？

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

基本选择器

1. 元素选择器

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

/* 选择所有 <p> 元素 */
p { /* 元素选择器：选中所有的 p 元素 */
    color: #333; /* 属性：color，设置文本颜色为深灰色 */
    line-height: 1.6; /* 属性：line-height，设置行高为 1.6 倍字体大小 */
}

/* 选择所有 <h1> 元素 */
h1 { /* 元素选择器：选中所有的 h1 元素 */
    color: #2c3e50; /* 属性：color，设置文本颜色为深蓝色 */
    font-size: 2rem; /* 属性：font-size，设置字体大小为 2 倍根元素字体大小 */
}

/* 选择所有 <div> 元素 */
div { /* 元素选择器：选中所有的 div 元素 */
    margin-bottom: 20px; /* 属性：margin-bottom，设置底部外边距为 20 像素 */
}

2. 类选择器

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

/* 选择所有带有 class="button" 的元素 */
.button { /* 类选择器：选中所有 class 为 button 的元素 */
    display: inline-block; /* 属性：display，设置为内联块元素 */
    padding: 10px 20px; /* 属性：padding，设置内边距：上下 10 像素，左右 20 像素 */
    background-color: #4CAF50; /* 属性：background-color，设置背景颜色为绿色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    border: none; /* 属性：border，设置边框为无 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
    cursor: pointer; /* 属性：cursor，设置鼠标指针为指针样式 */
}

/* 选择所有带有 class="card" 的元素 */
.card { /* 类选择器：选中所有 class 为 card 的元素 */
    background-color: #f9f9f9; /* 属性：background-color，设置背景颜色为浅灰色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
    border: 1px solid #ddd; /* 属性：border，设置边框为 1 像素实线，颜色为浅灰色 */
    border-radius: 8px; /* 属性：border-radius，设置圆角为 8 像素 */
}

/* 选择所有带有 class="text-center" 的元素 */
.text-center { /* 类选择器：选中所有 class 为 text-center 的元素 */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
}

3. ID 选择器

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

/* 选择带有 id="header" 的元素 */
#header { /* ID 选择器：选中 ID 为 header 的元素 */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
}

/* 选择带有 id="footer" 的元素 */
#footer { /* ID 选择器：选中 ID 为 footer 的元素 */
    background-color: #222; /* 属性：background-color，设置背景颜色为黑色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 30px; /* 属性：padding，设置内边距为 30 像素 */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
}

/* 选择带有 id="main-content" 的元素 */
#main-content { /* ID 选择器：选中 ID 为 main-content 的元素 */
    max-width: 800px; /* 属性：max-width，设置最大宽度为 800 像素 */
    margin: 0 auto; /* 属性：margin，设置上下外边距为 0，左右自动（水平居中） */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
}

4. 通配符选择器

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

/* 选择所有元素 */
* { /* 通配符选择器：选中所有元素 */
    margin: 0; /* 属性：margin，设置外边距为 0 */
    padding: 0; /* 属性：padding，设置内边距为 0 */
    box-sizing: border-box; /* 属性：box-sizing，设置盒模型为边框盒模型 */
}

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

5. 组合选择器

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

后代选择器

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

/* 选择 <nav> 元素内的所有 <a> 元素 */
nav a { /* 后代选择器：选中 nav 元素内的所有 a 元素 */
    color: #333; /* 属性：color，设置文本颜色为深灰色 */
    text-decoration: none; /* 属性：text-decoration，设置文本装饰为无（移除下划线） */
    padding: 10px; /* 属性：padding，设置内边距为 10 像素 */
}

/* 选择 <div> 元素内的所有带有 class="text" 的元素 */
div .text { /* 后代选择器：选中 div 元素内的所有 class 为 text 的元素 */
    font-size: 16px; /* 属性：font-size，设置字体大小为 16 像素 */
    line-height: 1.5; /* 属性：line-height，设置行高为 1.5 倍字体大小 */
}

子选择器

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

/* 选择 <ul> 元素的直接子元素 <li> */
ul > li { /* 子选择器：选中 ul 元素的直接子元素 li */
    list-style-type: none; /* 属性：list-style-type，设置列表项标记为无 */
    margin-bottom: 10px; /* 属性：margin-bottom，设置底部外边距为 10 像素 */
}

/* 选择 <div> 元素的直接子元素 <p> */
div > p { /* 子选择器：选中 div 元素的直接子元素 p */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

相邻兄弟选择器

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

/* 选择 <h1> 元素后面的第一个 <p> 元素 */
h1 + p { /* 相邻兄弟选择器：选中 h1 元素后面的第一个 p 元素 */
    font-size: 18px; /* 属性：font-size，设置字体大小为 18 像素 */
    color: #666; /* 属性：color，设置文本颜色为中灰色 */
}

/* 选择 <div> 元素后面的第一个 <span> 元素 */
div + span { /* 相邻兄弟选择器：选中 div 元素后面的第一个 span 元素 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

通用兄弟选择器

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

/* 选择 <h2> 元素后面的所有 <p> 元素 */
h2 ~ p { /* 通用兄弟选择器：选中 h2 元素后面的所有 p 元素 */
    margin-left: 20px; /* 属性：margin-left，设置左侧外边距为 20 像素 */
}

/* 选择 <div> 元素后面的所有 <span> 元素 */
div ~ span { /* 通用兄弟选择器：选中 div 元素后面的所有 span 元素 */
    color: #ff0000; /* 属性：color，设置文本颜色为红色 */
}

属性选择器

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

1. [attribute]

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

/* 选择所有带有 title 属性的元素 */
[title] { /* 属性选择器：选中所有带有 title 属性的元素 */
    border: 1px solid #ddd; /* 属性：border，设置边框为 1 像素实线，颜色为浅灰色 */
    padding: 5px; /* 属性：padding，设置内边距为 5 像素 */
}

/* 选择所有带有 href 属性的元素 */
[href] { /* 属性选择器：选中所有带有 href 属性的元素 */
    color: #3498db; /* 属性：color，设置文本颜色为蓝色 */
    text-decoration: none; /* 属性：text-decoration，设置文本装饰为无（移除下划线） */
}

2. [attribute=value]

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

/* 选择所有 href 属性值为 "https://example.com" 的元素 */
[href="https://example.com"] { /* 属性选择器：选中所有 href 属性值为 "https://example.com" 的元素 */
    color: #27ae60; /* 属性：color，设置文本颜色为绿色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

/* 选择所有 type 属性值为 "submit" 的元素 */
[type="submit"] { /* 属性选择器：选中所有 type 属性值为 "submit" 的元素 */
    background-color: #3498db; /* 属性：background-color，设置背景颜色为蓝色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 10px 20px; /* 属性：padding，设置内边距：上下 10 像素，左右 20 像素 */
    border: none; /* 属性：border，设置边框为无 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
}

3. [attribute^=value]

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

/* 选择所有 href 属性值以 "https://" 开头的元素 */
[href^="https://"] { /* 属性选择器：选中所有 href 属性值以 "https://" 开头的元素 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为浅灰色 */
    padding: 2px 4px; /* 属性：padding，设置内边距：上下 2 像素，左右 4 像素 */
    border-radius: 3px; /* 属性：border-radius，设置圆角为 3 像素 */
}

/* 选择所有 class 属性值以 "btn-" 开头的元素 */
[class^="btn-"] { /* 属性选择器：选中所有 class 属性值以 "btn-" 开头的元素 */
    display: inline-block; /* 属性：display，设置为内联块元素 */
    padding: 8px 16px; /* 属性：padding，设置内边距：上下 8 像素，左右 16 像素 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
}

4. [attribute$=value]

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

/* 选择所有 href 属性值以 ".pdf" 结尾的元素 */
[href$=".pdf"] { /* 属性选择器：选中所有 href 属性值以 ".pdf" 结尾的元素 */
    color: #e74c3c; /* 属性：color，设置文本颜色为红色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

/* 选择所有 src 属性值以 ".jpg" 或 ".png" 结尾的元素 */
[src$=".jpg"], [src$=".png"] { /* 属性选择器：选中所有 src 属性值以 ".jpg" 或 ".png" 结尾的元素 */
    border: 1px solid #ddd; /* 属性：border，设置边框为 1 像素实线，颜色为浅灰色 */
    padding: 5px; /* 属性：padding，设置内边距为 5 像素 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
}

5. [attribute*=value]

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

/* 选择所有 href 属性值包含 "example" 的元素 */
[href*="example"] { /* 属性选择器：选中所有 href 属性值包含 "example" 的元素 */
    color: #9b59b6; /* 属性：color，设置文本颜色为紫色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

/* 选择所有 class 属性值包含 "text" 的元素 */
[class*="text"] { /* 属性选择器：选中所有 class 属性值包含 "text" 的元素 */
    font-size: 16px; /* 属性：font-size，设置字体大小为 16 像素 */
    line-height: 1.5; /* 属性：line-height，设置行高为 1.5 倍字体大小 */
}

伪类选择器

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

1. 状态伪类

:hover

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

/* 当鼠标悬停在 <a> 元素上时 */
a:hover { /* 伪类选择器：选中鼠标悬停在上面的 a 元素 */
    color: #e74c3c; /* 属性：color，设置文本颜色为红色 */
    text-decoration: underline; /* 属性：text-decoration，设置文本装饰为下划线 */
}

/* 当鼠标悬停在 .button 元素上时 */
.button:hover { /* 伪类选择器：选中鼠标悬停在上面的 .button 元素 */
    background-color: #3498db; /* 属性：background-color，设置背景颜色为蓝色 */
    transform: translateY(-2px); /* 属性：transform，设置向上平移 2 像素 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 属性：box-shadow，设置阴影效果 */
}

:active

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

/* 当 <a> 元素被点击时 */
a:active { /* 伪类选择器：选中被激活（点击）的 a 元素 */
    color: #c0392b; /* 属性：color，设置文本颜色为深红色 */
}

/* 当 .button 元素被点击时 */
.button:active { /* 伪类选择器：选中被激活（点击）的 .button 元素 */
    transform: translateY(0); /* 属性：transform，设置平移为 0（恢复原位置） */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 属性：box-shadow，设置阴影效果为较小 */
}

:focus

选择获得焦点的元素：

/* 当输入框获得焦点时 */
input:focus { /* 伪类选择器：选中获得焦点的 input 元素 */
    border-color: #3498db; /* 属性：border-color，设置边框颜色为蓝色 */
    outline: none; /* 属性：outline，设置轮廓为无（移除默认轮廓） */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* 属性：box-shadow，设置蓝色发光效果 */
}

/* 当文本区域获得焦点时 */
textarea:focus { /* 伪类选择器：选中获得焦点的 textarea 元素 */
    border-color: #3498db; /* 属性：border-color，设置边框颜色为蓝色 */
    outline: none; /* 属性：outline，设置轮廓为无（移除默认轮廓） */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* 属性：box-shadow，设置蓝色发光效果 */
}

:visited

选择已访问的链接：

/* 选择已访问的 <a> 元素 */
a:visited { /* 伪类选择器：选中已访问的 a 元素 */
    color: #9b59b6; /* 属性：color，设置文本颜色为紫色 */
}

2. 结构伪类

:first-child

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

/* 选择作为其父元素的第一个子元素的 <p> 元素 */
p:first-child { /* 结构伪类选择器：选中作为其父元素的第一个子元素的 p 元素 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
    color: #2c3e50; /* 属性：color，设置文本颜色为深蓝色 */
}

/* 选择作为其父元素的第一个子元素的 <li> 元素 */
li:first-child { /* 结构伪类选择器：选中作为其父元素的第一个子元素的 li 元素 */
    border-top: 1px solid #ddd; /* 属性：border-top，设置顶部边框为 1 像素实线，颜色为浅灰色 */
}

:last-child

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

/* 选择作为其父元素的最后一个子元素的 <p> 元素 */
p:last-child { /* 结构伪类选择器：选中作为其父元素的最后一个子元素的 p 元素 */
    margin-bottom: 0; /* 属性：margin-bottom，设置底部外边距为 0 */
    padding-bottom: 0; /* 属性：padding-bottom，设置底部内边距为 0 */
}

/* 选择作为其父元素的最后一个子元素的 <li> 元素 */
li:last-child { /* 结构伪类选择器：选中作为其父元素的最后一个子元素的 li 元素 */
    border-bottom: 1px solid #ddd; /* 属性：border-bottom，设置底部边框为 1 像素实线，颜色为浅灰色 */
}

:nth-child(n)

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

/* 选择作为其父元素的第 2 个子元素的 <li> 元素 */
li:nth-child(2) { /* 结构伪类选择器：选中作为其父元素的第 2 个子元素的 li 元素 */
    color: #e74c3c; /* 属性：color，设置文本颜色为红色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

/* 选择作为其父元素的奇数个子元素的 <tr> 元素 */
tr:nth-child(odd) { /* 结构伪类选择器：选中作为其父元素的奇数个子元素的 tr 元素 */
    background-color: #f9f9f9; /* 属性：background-color，设置背景颜色为浅灰色 */
}

/* 选择作为其父元素的偶数个子元素的 <tr> 元素 */
tr:nth-child(even) { /* 结构伪类选择器：选中作为其父元素的偶数个子元素的 tr 元素 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为更浅的灰色 */
}

/* 选择作为其父元素的第 3n 个子元素的 <div> 元素 */
div:nth-child(3n) { /* 结构伪类选择器：选中作为其父元素的第 3n 个子元素的 div 元素 */
    margin-right: 0; /* 属性：margin-right，设置右侧外边距为 0 */
}

:nth-last-child(n)

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

/* 选择作为其父元素的倒数第 2 个子元素的 <p> 元素 */
p:nth-last-child(2) { /* 结构伪类选择器：选中作为其父元素的倒数第 2 个子元素的 p 元素 */
    font-style: italic; /* 属性：font-style，设置字体样式为斜体 */
}

/* 选择作为其父元素的倒数第 3 个子元素的 <li> 元素 */
li:nth-last-child(3) { /* 结构伪类选择器：选中作为其父元素的倒数第 3 个子元素的 li 元素 */
    color: #3498db; /* 属性：color，设置文本颜色为蓝色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

:only-child

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

/* 选择作为其父元素的唯一子元素的 <p> 元素 */
p:only-child { /* 结构伪类选择器：选中作为其父元素的唯一子元素的 p 元素 */
    font-size: 18px; /* 属性：font-size，设置字体大小为 18 像素 */
    color: #27ae60; /* 属性：color，设置文本颜色为绿色 */
}

/* 选择作为其父元素的唯一子元素的 <div> 元素 */
div:only-child { /* 结构伪类选择器：选中作为其父元素的唯一子元素的 div 元素 */
    background-color: #f0f8ff; /* 属性：background-color，设置背景颜色为浅蓝色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素 */
    border-radius: 8px; /* 属性：border-radius，设置圆角为 8 像素 */
}

:first-of-type

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

/* 选择作为其父元素的第一个 <p> 类型的子元素 */
p:first-of-type { /* 结构伪类选择器：选中作为其父元素的第一个 p 类型的子元素 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
    color: #2c3e50; /* 属性：color，设置文本颜色为深蓝色 */
}

/* 选择作为其父元素的第一个 <div> 类型的子元素 */
div:first-of-type { /* 结构伪类选择器：选中作为其父元素的第一个 div 类型的子元素 */
    background-color: #f9f9f9; /* 属性：background-color，设置背景颜色为浅灰色 */
    padding: 15px; /* 属性：padding，设置内边距为 15 像素 */
    border-radius: 8px; /* 属性：border-radius，设置圆角为 8 像素 */
}

:last-of-type

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

/* 选择作为其父元素的最后一个 <p> 类型的子元素 */
p:last-of-type { /* 结构伪类选择器：选中作为其父元素的最后一个 p 类型的子元素 */
    margin-bottom: 0; /* 属性：margin-bottom，设置底部外边距为 0 */
    padding-bottom: 0; /* 属性：padding-bottom，设置底部内边距为 0 */
}

/* 选择作为其父元素的最后一个 <div> 类型的子元素 */
div:last-of-type { /* 结构伪类选择器：选中作为其父元素的最后一个 div 类型的子元素 */
    margin-bottom: 0; /* 属性：margin-bottom，设置底部外边距为 0 */
}

:nth-of-type(n)

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

/* 选择作为其父元素的第 2 个 <p> 类型的子元素 */
p:nth-of-type(2) { /* 结构伪类选择器：选中作为其父元素的第 2 个 p 类型的子元素 */
    color: #e74c3c; /* 属性：color，设置文本颜色为红色 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
}

/* 选择作为其父元素的奇数个 <div> 类型的子元素 */
div:nth-of-type(odd) { /* 结构伪类选择器：选中作为其父元素的奇数个 div 类型的子元素 */
    background-color: #f9f9f9; /* 属性：background-color，设置背景颜色为浅灰色 */
}

/* 选择作为其父元素的偶数个 <div> 类型的子元素 */
div:nth-of-type(even) { /* 结构伪类选择器：选中作为其父元素的偶数个 div 类型的子元素 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为更浅的灰色 */
}

伪元素选择器

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

1. ::before

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

/* 在 <h1> 元素内容的前面插入 "📌 " */
h1::before { /* 伪元素选择器：在 h1 元素内容的前面插入内容 */
    content: "📌 "; /* 属性：content，指定要插入的内容为 "📌 " */
}

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

2. ::after

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

/* 在 <a> 元素内容的后面插入 " ↗" */
a[href^="http"]::after { /* 伪元素选择器：在 href 属性值以 "http" 开头的 a 元素内容的后面插入内容 */
    content: " ↗"; /* 属性：content，指定要插入的内容为 " ↗" */
    font-size: 0.8rem; /* 属性：font-size，设置字体大小为 0.8 倍根元素字体大小 */
}

/* 在带有 class="quote" 的元素内容的后面插入引号 */
.quote::after { /* 伪元素选择器：在 class 为 quote 的元素内容的后面插入内容 */
    content: "\""; /* 属性：content，指定要插入的内容为引号 */
    font-size: 2rem; /* 属性：font-size，设置字体大小为 2 倍根元素字体大小 */
    color: #9b59b6; /* 属性：color，设置文本颜色为紫色 */
    font-family: Georgia, serif; /* 属性：font-family，设置字体系列为 Georgia 或 serif 替代 */
}

3. ::first-line

选择元素的第一行文本：

/* 选择 <p> 元素的第一行文本 */
p::first-line { /* 伪元素选择器：选中 p 元素的第一行文本 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
    color: #2c3e50; /* 属性：color，设置文本颜色为深蓝色 */
}

/* 选择带有 class="intro" 的元素的第一行文本 */
.intro::first-line { /* 伪元素选择器：选中 class 为 intro 的元素的第一行文本 */
    font-size: 1.2rem; /* 属性：font-size，设置字体大小为 1.2 倍根元素字体大小 */
    line-height: 1.4; /* 属性：line-height，设置行高为 1.4 倍字体大小 */
}

4. ::first-letter

选择元素的第一个字符：

/* 选择 <p> 元素的第一个字符 */
p::first-letter { /* 伪元素选择器：选中 p 元素的第一个字符 */
    font-size: 2rem; /* 属性：font-size，设置字体大小为 2 倍根元素字体大小 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
    color: #e74c3c; /* 属性：color，设置文本颜色为红色 */
    float: left; /* 属性：float，设置浮动为左浮动 */
    margin-right: 8px; /* 属性：margin-right，设置右侧外边距为 8 像素 */
    line-height: 1; /* 属性：line-height，设置行高为 1 倍字体大小 */
}

/* 选择带有 class="drop-cap" 的元素的第一个字符 */
.drop-cap::first-letter { /* 伪元素选择器：选中 class 为 drop-cap 的元素的第一个字符 */
    font-size: 3rem; /* 属性：font-size，设置字体大小为 3 倍根元素字体大小 */
    font-weight: bold; /* 属性：font-weight，设置字体粗细为粗体 */
    color: #3498db; /* 属性：color，设置文本颜色为蓝色 */
    float: left; /* 属性：float，设置浮动为左浮动 */
    margin-right: 10px; /* 属性：margin-right，设置右侧外边距为 10 像素 */
    line-height: 0.8; /* 属性：line-height，设置行高为 0.8 倍字体大小 */
}

5. ::selection

选择被用户选中的文本：

/* 选择被用户选中的文本 */
::selection { /* 伪元素选择器：选中被用户选中的文本 */
    background-color: #ffeb3b; /* 属性：background-color，设置选中文本的背景颜色为黄色 */
    color: #2c3e50; /* 属性：color，设置选中文本的颜色为深蓝色 */
}

/* 选择被用户选中的 <p> 元素的文本 */
p::selection { /* 伪元素选择器：选中被用户选中的 p 元素的文本 */
    background-color: #e3f2fd; /* 属性：background-color，设置选中文本的背景颜色为浅蓝色 */
    color: #1976d2; /* 属性：color，设置选中文本的颜色为深蓝色 */
}

选择器优先级

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

内联样式（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
选择器优先级规则