css选择器

CSS 选择器是用于选择 HTML 元素的模式或规则。它们在 CSS 中非常关键，因为它们决定了哪些元素将应用特定的样式。以下是一些常见的 CSS 选择器及其解释：

1. 元素选择器

选择所有指定类型的 HTML 元素。

01
02
03
p {
    color: blue;
}

解释：选择所有的 <p> 元素，并将它们的文本颜色设置为蓝色。

2. 类选择器

选择所有具有指定类名的元素。

01
02
03
.my-class {
    background-color: yellow;
}

解释：选择所有带有 class="my-class" 的元素，并将它们的背景颜色设置为黄色。

3. ID 选择器

选择具有指定 ID 的元素。

01
02
03
#my-id {
    font-size: 20px;
}

解释：选择 ID 为 my-id 的元素，并将它的字体大小设置为 20 像素。

4. 属性选择器

选择具有指定属性的元素。

01
02
03
[type="text"] {
    border: 1px solid black;
}

解释：选择所有 type 属性为 text 的元素，并将它们的边框设置为 1 像素黑色实线。

5. 伪类选择器

选择具有特定状态的元素。

01
02
03
a:hover {
    color: red;
}

解释：选择鼠标悬停在其上的 <a> 元素，并将它们的文本颜色设置为红色。

6. 伪元素选择器

选择元素的特定部分。

01
02
03
p::first-line {
    font-weight: bold;
}

解释：选择所有 <p> 元素的第一行，并将这一行的文本加粗。

7. 后代选择器

选择作为某个元素后代的所有元素。

01
02
03
div p {
    color: green;
}

解释：选择所有作为 <div> 元素后代的 <p> 元素，并将它们的文本颜色设置为绿色。

8. 子选择器

选择作为某个元素直接子元素的所有元素。

01
02
03
div > p {
    color: purple;
}

解释：选择所有作为 <div> 元素直接子元素的 <p> 元素，并将它们的文本颜色设置为紫色。

9. 相邻兄弟选择器

选择紧接在另一个元素之后的元素。

01
02
03
h1 + p {
    margin-top: 0;
}

解释：选择所有紧接在 <h1> 元素之后的 <p> 元素，并将它们的上外边距设置为 0。

10. 通用兄弟选择器

选择某个元素之后的所有同级元素。

01
02
03
h1 ~ p {
    color: orange;
}

解释：选择所有在 <h1> 元素之后的同级 <p> 元素，并将它们的文本颜色设置为橙色。

11. 通配符选择器

选择所有元素。

01
02
03
* {
    box-sizing: border-box;
}

解释：选择所有元素，并将它们的盒模型设置为 border-box。

12. 分组选择器

选择多种类型的元素。

01
02
03
h1, h2, h3 {
    font-weight: normal;
}

解释：选择所有 <h1>、<h2> 和 <h3> 元素，并将它们的字体权重设置为正常。

汇总