CSS 选择器有哪些

CSS 选择器用于决定某个HTML元素上应用哪些样式。

以下是一些常用的CSS选择器：

1. 元素选择器

基于HTML元素的名称选择元素。例如，选择所有的 <p> 元素：

css
p {
    color: red;
}

2. id 选择器

使用HTML元素的 id 属性选择特定元素。id 选择器在CSS中使用 #" 符号定义。例如,选择 id="intro"的元素：

css
#intro {
    color: blue;
}

3. 类选择器

使用HTML元素的 class 属性选择特定元素。类选择器在CSS中使用 . 符号定义。例如,选择 class="highlight"的所有元素：

css
.highlight {
    background-color: yellow;
}

4. 属性选择器

可以选择带有指定属性的HTML元素。例如，选择所有带有 target 属性的 <a> 元素：

css
a[target] {
    background-color: pink;
}

5. 伪类选择器

用于选择HTML元素的特定状态。例如，选择鼠标悬停在上面的 <a> 元素：

css
a:hover {
    color: green;
}

6. 伪元素选择器

用于选择元素的某一部分。例如，选择每个 <p> 元素的第一行：

css
p::first-line {
    color: orange;
}

7. 组合选择器

有时候，我们需要选择满足多项条件的元素，这时候就可以使用组合选择器。常见的组合选择器如下：

• 后代选择器（空格）

css
div p {
    color: brown;
}

• 子代选择器（>）

css
div > p {
    color: purple;
}

• 相邻兄弟选择器（+）

css
div + p {
    color: gray;
}

• 一般兄弟选择器（~）

css
div ~ p {
    color: teal;
}