CSS 选择器

CSS 选择器用于选择要设置样式的 HTML 元素。通过使用不同的选择器，我们可以精确地控制哪些元素应用特定的样式。

基本选择器

元素选择器

元素选择器根据元素名称选择 HTML 元素：

/* 选择所有 <p> 元素 */
p {
    color: blue;
}

/* 选择所有 <h1> 元素 */
h1 {
    font-size: 2em;
}

类选择器

类选择器以点号（.）开头，选择具有特定 class 属性的元素：

/* 选择所有 class="highlight" 的元素 */
.highlight {
    background-color: yellow;
}

/* 选择所有 class="intro" 的 <p> 元素 */
p.intro {
    font-style: italic;
}

ID 选择器

ID 选择器以井号（#）开头，选择具有特定 id 属性的元素：

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

通用选择器

通用选择器（*）选择文档中的所有元素：

/* 选择所有元素 */
* {
    margin: 0;
    padding: 0;
}

组合选择器

后代选择器

后代选择器用空格分隔，选择某元素内部的所有指定后代元素：

/* 选择 <div> 内的所有 <p> 元素 */
div p {
    color: green;
}

子选择器

子选择器用大于号（>）分隔，只选择直接子元素：

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

相邻兄弟选择器

相邻兄弟选择器用加号（+）分隔，选择紧接在某元素后的同级元素：

/* 选择紧跟在 <h1> 后的 <p> 元素 */
h1 + p {
    margin-top: 0;
}

通用兄弟选择器

通用兄弟选择器用波浪号（~）分隔，选择某元素后的所有同级元素：

/* 选择 <h1> 后的所有 <p> 同级元素 */
h1 ~ p {
    color: gray;
}

属性选择器

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

/* 选择具有 title 属性的元素 */
[title] {
    border: 1px solid blue;
}

/* 选择 type="text" 的元素 */
input[type="text"] {
    width: 200px;
}

/* 选择 href 属性值以 https 开头的链接 */
a[href^="https"] {
    color: green;
}

/* 选择 src 属性值以 .jpg 结尾的图像 */
img[src$=".jpg"] {
    border: 2px solid red;
}

伪类选择器

伪类选择器用于选择元素的特定状态：

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

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

/* 鼠标悬停状态 */
a:hover {
    color: red;
    text-decoration: none;
}

/* 元素获得焦点状态 */
input:focus {
    border: 2px solid blue;
}

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

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

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

伪元素选择器

伪元素选择器用于选择元素的特定部分：

/* 选择元素的第一个字母 */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* 选择元素的第一行 */
p::first-line {
    color: blue;
}

/* 在元素内容前插入内容 */
.quote::before {
    content: """;
}

/* 在元素内容后插入内容 */
.quote::after {
    content: """;
}

/* 选择被用户选中的文本 */
::selection {
    background-color: yellow;
}

选择器优先级

当多个规则应用于同一个元素时，CSS 使用优先级来决定应用哪个规则：

1. 内联样式（style 属性）- 1000
2. ID 选择器 - 100
3. 类选择器、属性选择器、伪类 - 10
4. 元素选择器、伪元素 - 1

使用 !important 可以覆盖优先级规则，但应谨慎使用：

p {
    color: blue !important;
}

理解这些选择器及其优先级规则对于编写高效的 CSS 至关重要。