CSS 5 ，深入理解 CSS 选择器：全面指南
目录
前言
CSS（层叠样式表）选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式，使得网页变得美观和具有交互性。这里来分享记录，各种 CSS 选择器及其使用方法。
一. 选择器权重
二. 选择器使用
🟣⚫ Ⅰ. 基本选择器
🟣⚫ Ⅱ. 组合选择器
🟣⚫ Ⅲ. 属性选择器
🟣⚫ Ⅳ. 伪类选择器
🟣⚫ Ⅴ. 伪元素选择器
🟣⚫ Ⅵ. 高级选择器
🟣⚫ Ⅶ. 组合复杂选择器
三. 选择器类型
1. 基本选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器
6. 高级选择器
7. 组合复杂选择器
前言
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. 基本选择器
- 通配符选择器
- 元素选择器
- 类选择器
- ID 选择器
2. 组合选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 普通兄弟选择器
3. 属性选择器
- 存在属性选择器
- 特定属性值选择器
- 属性值以特定字符串开头的选择器
- 属性值以特定字符串结尾的选择器
- 属性值包含特定字符串的选择器
4. 伪类选择器
- 链接伪类选择器
- 动态伪类选择器
- 结构性伪类选择器
5. 伪元素选择器
- 首字母伪元素选择器
- 首行伪元素选择器
- 伪内容选择器
6. 高级选择器
- 否定伪类选择器
:nth-of-type选择器:only-child选择器
7. 组合复杂选择器
组合各种选择器，来创建更复杂的选择规则。
