CSS 选择器详解:类型、用法与示例
文章目录
- 引言
- 1. 基本选择器
- 1.1 元素选择器(Type Selector)
- 语法
- 示例
- 1.2 类选择器(Class Selector)
- 语法
- 示例
- 1.3 ID 选择器(ID Selector)
- 语法
- 示例
- 1.4 通配符选择器(Universal Selector)
- 语法
- 示例
- 2. 组合选择器
- 2.1 后代选择器(Descendant Selector)
- 语法
- 示例
- 2.2 子元素选择器(Child Selector)
- 语法
- 示例
- 2.3 相邻兄弟选择器(Adjacent Sibling Selector)
- 语法
- 示例
- 2.4 通用兄弟选择器(General Sibling Selector)
- 语法
- 示例
- 3. 属性选择器
- 3.1 属性存在选择器(Attribute Presence Selector)
- 语法
- 示例
- 3.2 属性值选择器(Attribute Value Selector)
- 语法
- 示例
- 3.3 属性值前缀选择器(Attribute Prefix Selector)
- 语法
- 示例
- 3.4 属性值后缀选择器(Attribute Suffix Selector)
- 语法
- 示例
- 3.5 属性值包含选择器(Attribute Substring Selector)
- 语法
- 示例
- 4. 伪类选择器
- 4.1 动态伪类(Dynamic Pseudo-classes)
- 示例
- 4.2 结构伪类(Structural Pseudo-classes)
- 示例
- 4.3 否定伪类(Negation Pseudo-class)
- 语法
- 示例
- 5. 伪元素选择器
- 5.1 `::before` 和 `::after`
- 示例
- 5.2 `::first-line` 和 `::first-letter`
- 示例
- 6. 总结
- 参考资料
引言
CSS 选择器是用于选择 HTML 元素并为其应用样式的重要工具。掌握各种 CSS 选择器的用法,可以帮助开发者更高效地编写样式代码。本文将详细介绍 CSS 中的各种选择器,包括基本选择器、组合选择器、伪类选择器和伪元素选择器,并通过代码示例帮助读者深入理解。
1. 基本选择器
1.1 元素选择器(Type Selector)
元素选择器根据 HTML 元素的标签名选择元素。
语法
element {
/* 样式规则 */
}
示例
p {
color: blue;
}
1.2 类选择器(Class Selector)
类选择器根据元素的 class
属性选择元素。
语法
.className {
/* 样式规则 */
}
示例
.highlight {
background-color: yellow;
}
1.3 ID 选择器(ID Selector)
ID 选择器根据元素的 id
属性选择元素。
语法
#idName {
/* 样式规则 */
}
示例
#header {
font-size: 24px;
}
1.4 通配符选择器(Universal Selector)
通配符选择器选择所有元素。
语法
* {
/* 样式规则 */
}
示例
* {
margin: 0;
padding: 0;
}
2. 组合选择器
2.1 后代选择器(Descendant Selector)
后代选择器选择某个元素的后代元素。
语法
ancestor descendant {
/* 样式规则 */
}
示例
div p {
color: red;
}
2.2 子元素选择器(Child Selector)
子元素选择器选择某个元素的直接子元素。
语法
parent > child {
/* 样式规则 */
}
示例
ul > li {
list-style-type: none;
}
2.3 相邻兄弟选择器(Adjacent Sibling Selector)
相邻兄弟选择器选择某个元素的下一个兄弟元素。
语法
element + sibling {
/* 样式规则 */
}
示例
h1 + p {
font-weight: bold;
}
2.4 通用兄弟选择器(General Sibling Selector)
通用兄弟选择器选择某个元素的所有兄弟元素。
语法
element ~ sibling {
/* 样式规则 */
}
示例
h1 ~ p {
color: green;
}
3. 属性选择器
3.1 属性存在选择器(Attribute Presence Selector)
选择具有指定属性的元素。
语法
[attribute] {
/* 样式规则 */
}
示例
[target] {
border: 1px solid black;
}
3.2 属性值选择器(Attribute Value Selector)
选择具有指定属性值的元素。
语法
[attribute="value"] {
/* 样式规则 */
}
示例
[type="text"] {
background-color: yellow;
}
3.3 属性值前缀选择器(Attribute Prefix Selector)
选择属性值以指定字符串开头的元素。
语法
[attribute^="value"] {
/* 样式规则 */
}
示例
[href^="https"] {
color: green;
}
3.4 属性值后缀选择器(Attribute Suffix Selector)
选择属性值以指定字符串结尾的元素。
语法
[attribute$="value"] {
/* 样式规则 */
}
示例
[src$=".png"] {
border: 2px solid blue;
}
3.5 属性值包含选择器(Attribute Substring Selector)
选择属性值包含指定字符串的元素。
语法
[attribute*="value"] {
/* 样式规则 */
}
示例
[class*="btn"] {
background-color: orange;
}
4. 伪类选择器
4.1 动态伪类(Dynamic Pseudo-classes)
根据用户交互状态选择元素。
示例
a:hover {
color: red;
}
input:focus {
border-color: blue;
}
4.2 结构伪类(Structural Pseudo-classes)
根据元素在文档中的位置选择元素。
示例
li:first-child {
font-weight: bold;
}
li:nth-child(2n) {
background-color: lightgray;
}
4.3 否定伪类(Negation Pseudo-class)
选择不匹配指定选择器的元素。
语法
:not(selector) {
/* 样式规则 */
}
示例
:not(.highlight) {
opacity: 0.5;
}
5. 伪元素选择器
5.1 ::before
和 ::after
在元素内容的前面或后面插入内容。
示例
p::before {
content: "Note: ";
font-weight: bold;
}
p::after {
content: " (End)";
color: gray;
}
5.2 ::first-line
和 ::first-letter
选择元素的第一行或第一个字母。
示例
p::first-line {
font-size: 1.2em;
}
p::first-letter {
font-size: 2em;
color: red;
}
6. 总结
CSS 选择器是控制网页样式的重要工具。本文详细介绍了基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器,并通过代码示例展示了它们的用法。掌握这些选择器,可以帮助开发者更高效地编写样式代码,实现复杂的布局和效果。
参考资料
- MDN Web Docs: CSS Selectors
- W3Schools: CSS Selectors
- CSS: The Definitive Guide
注意:本文中的代码示例仅供参考,实际应用中可能需要根据具体需求进行调整和优化。