css常用选择器

常用选择器

CSS（层叠样式表）具有丰富的选择器，用于选择 HTML 元素并应用样式。以下是一些常用的 CSS 选择器：

1. 元素选择器：通过元素的标签名称选择元素。例如，选择所有的段落元素可以使用 p 选择器。

p {
    /* 样式规则 */
}

2. ID 选择器：通过元素的唯一 ID 属性选择元素。使用 # 后跟 ID 名称来选择元素。例如，选择具有 my-element ID 的元素可以使用 #my-element 选择器。

#my-element {
    /* 样式规则 */
}

3. 类选择器：通过元素的类名选择元素。使用 . 后跟类名来选择元素。例如，选择所有具有 my-class 类的元素可以使用 .my-class 选择器。

.my-class {
    /* 样式规则 */
}

4. 属性选择器：通过元素的属性值选择元素。使用属性选择器可以根据属性的存在、值或其他条件来选择元素。例如，选择具有 src 属性的图像元素可以使用 [src] 选择器。

[src] {
    /* 样式规则 */
}

[type="text"] {
    /* 样式规则 */
}

5. 后代选择器：选择某个元素下的子孙元素。使用空格分隔父元素和子元素的选择器。例如，选择
   元素下的所有段落元素可以使用 div p 选择器。

div p {
    /* 样式规则 */
}

6. 直接子元素选择器：选择某个元素下的直接子元素。使用 > 分隔父元素和直接子元素的选择器。例如，选择
   元素下的直接子级段落元素可以使用 div > p 选择器。

div > p {
    /* 样式规则 */
}

伪类选择器

CSS 伪类选择器用于选择特定状态或位置的元素，常用于操控元素的样式。以下是一些常用的 CSS 伪类选择器：

1. :hover - 当鼠标悬停在一个元素上时应用样式。

a:hover {
    /* 样式规则 */
}

2. :active - 当元素被点击时应用样式。

button:active {
    /* 样式规则 */
}

3. :focus - 当元素获得焦点时应用样式（例如输入框）。

input:focus {
    /* 样式规则 */
}

4. :visited - 选择已经访问过的链接。

a:visited {
    /* 样式规则 */
}

5. :first-child - 选择父元素下的第一个子元素。

li:first-child {
    /* 样式规则 */
}

6. :last-child - 选择父元素下的最后一个子元素。

li:last-child {
    /* 样式规则 */
}

7. :nth-child(n) - 选择父元素下的第 n 个子元素。

li:nth-child(3) {
    /* 样式规则 */
}

8. :nth-of-type(n) - 选择父元素下同类型元素中的第 n 个元素。

p:nth-of-type(2) {
    /* 样式规则 */
}

9. :not(selector) - 选择不匹配给定选择器的元素。

:not(.highlight) {
    /* 样式规则 */
}

分组选择器

CSS 分组选择器允许你同时选择多个元素，并为它们应用相同的样式。这样可以简化代码，提高效率。以下是一些常用的 CSS 分组选择器：

1. 元素选择器：通过逗号分隔多个元素的标签名称选择元素。例如，选择所有的段落和标题元素，并应用相同的样式可以使用 p, h1, h2, h3 分组选择器。

p, h1, h2, h3 {
    /* 样式规则 */
}

2. 类选择器和 ID 选择器的组合：通过逗号分隔多个类选择器和 ID 选择器来选择元素。例如，选择具有相同类名或 ID 的元素，并应用相同的样式可以使用 .my-class, #my-id 分组选择器。

.my-class, #my-id {
    /* 样式规则 */
}

3. 通用选择器和元素选择器的组合：通过逗号分隔多个通用选择器和元素选择器来选择元素。例如，选择所有的段落和 div 元素，并应用相同的样式可以使用 *, p, div 分组选择器。

*, p, div {
    /* 样式规则 */
}

4. 后代选择器和元素选择器的组合：通过逗号分隔多个后代选择器和元素选择器来选择元素。例如，选择
   元素下的所有段落和列表元素，并应用相同的样式可以使用 div p, div ul, div ol 分组选择器。

div p, div ul, div ol {
    /* 样式规则 */
}