深入理解 CSS 选择器：全面指南

简述：CSS（层叠样式表）选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式，使得网页变得美观和具有交互性。这里来记录一下，各种 CSS 选择器及其使用方法。

---

一. Css各种选择器的权重

!important > 行内式 > id选择器 > 类/伪类/属性选择器 > 标签选择器 > 全局选择器

分别对应：无穷大 > 1000 > 100 > 10 > 1 > 0

---

二. 选择器类型

🟣⚫ Ⅰ. 基本选择器

1. 通配符选择器

通配符选择器 (*) 用于选择所有元素。

* {
    margin: 0;
    padding: 0;
}

2. 元素选择器

元素选择器用于选择特定类型的 HTML 元素。

p {
    color: blue;
}

3. 类选择器

类选择器用于选择具有特定类的元素。类名以 . 开头。

.intro {
    font-size: 20px;
}

4. ID 选择器

ID 选择器用于选择具有特定 ID 的元素。ID 名以 # 开头。

#header {
    background-color: grey;
}

---

🟣⚫ Ⅱ. 组合选择器

1. 后代选择器

后代选择器用于选择某元素的所有后代元素。

div p {
    color: green;
}

2. 子选择器

子选择器用于选择某元素的直接子元素。

ul > li {
    list-style-type: none;
}

3. 相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某元素后的兄弟元素。

h1 + p {
    font-weight: bold;
}

4. 普通兄弟选择器

普通兄弟选择器用于选择某元素后所有的兄弟元素。

h1 ~ p {
    color: red;
}

---

🟣⚫ Ⅲ. 属性选择器

1. 存在属性选择器

选择具有某个属性的元素。

a[href] {
    text-decoration: none;
}

2. 特定属性值选择器

选择具有特定属性值的元素。

input[type="text"] {
    width: 200px;
}

3. 属性值以特定字符串开头的选择器

选择属性值以特定字符串开头的元素。

a[href^="https"] {
    color: green;
}

4. 属性值以特定字符串结尾的选择器

选择属性值以特定字符串结尾的元素。

a[href$=".pdf"] {
    color: red;
}

5. 属性值包含特定字符串的选择器

选择属性值包含特定字符串的元素。

a[href*="example"] {
    color: blue;
}

---

🟣⚫ Ⅳ. 伪类选择器

1. 链接伪类选择器

用于选择不同状态下的链接元素。

a:link {
    color: blue;
}
a:visited {
    color: purple;
}

2. 动态伪类选择器

用于选择鼠标与元素交互时的不同状态。

a:hover {
    color: red;
}
a:active {
    color: yellow;
}

3. 结构性伪类选择器

用于选择特定结构中的元素。

p:first-child {
    font-weight: bold;
}
p:last-child {
    font-style: italic;
}
p:nth-child(2) {
    text-decoration: underline;
}

---

🟣⚫ Ⅴ. 伪元素选择器

1. 首字母伪元素选择器

用于选择元素的首字母。

p::first-letter {
    font-size: 2em;
    color: red;
}

2. 首行伪元素选择器

用于选择元素的首行。

p::first-line {
    font-weight: bold;
}

3. 伪内容选择器

用于在元素的内容前后插入内容。

p::before {
    content: "Note: ";
    font-weight: bold;
}
p::after {
    content: " (end of paragraph)";
}

---

🟣⚫ Ⅵ. 高级选择器

1. 否定伪类选择器

选择不匹配某选择器的元素。

input:not([type="submit"]) {
    border: 1px solid black;
}

2. :nth-of-type 选择器

选择属于特定类型的第 N 个元素。

li:nth-of-type(2) {
    color: green;
}

3. :only-child 选择器

选择父元素中唯一的子元素。

p:only-child {
    font-size: 20px;
}

---

🟣⚫ Ⅶ. 组合复杂选择器

你可以组合各种选择器来创建更复杂的选择规则。

div#content > p.intro::first-line {
    color: blue;
}

---

三. 所有选择器的类型，文字目录

1. [基本选择器](#1. 基本选择器)

• 通配符选择器
• 元素选择器
• 类选择器
• [ID 选择器](#ID 选择器)

2. 组合选择器

• 后代选择器
• 子选择器
• 相邻兄弟选择器
• 普通兄弟选择器

3. 属性选择器

• 存在属性选择器
• 特定属性值选择器
• 属性值以特定字符串开头的选择器
• 属性值以特定字符串结尾的选择器
• 属性值包含特定字符串的选择器

4. 伪类选择器

• 链接伪类选择器
• 动态伪类选择器
• 结构性伪类选择器

5. 伪元素选择器

• 首字母伪元素选择器
• 首行伪元素选择器
• 伪内容选择器

6. 高级选择器

• 否定伪类选择器
• [:nth-of-type 选择器](#:nth-of-type 选择器)
• [:only-child 选择器](#:only-child 选择器)

7. 组合复杂选择器

组合各种选择器，来创建更复杂的选择规则。