CSS 选择器
2025-02-17
基础选择器
1. 元素选择器
/* 选择所有p元素 */
p {
color: blue;
}2. 类选择器
/* 选择所有class="highlight"的元素 */
.highlight {
background-color: yellow;
}3. ID选择器
/* 选择id="header"的元素 */
#header {
font-size: 24px;
}4. 通配符选择器
/* 选择所有元素 */
* {
margin: 0;
padding: 0;
}组合选择器
1. 后代选择器
/* 选择div内的所有p元素 */
div p {
margin: 10px;
}2. 子元素选择器
/* 只选择div的直接子元素p */
div > p {
padding: 5px;
}3. 相邻兄弟选择器
/* 选择紧跟在h1后面的p元素 */
h1 + p {
font-weight: bold;
}多类名使用
类选择器可以同时使用多个类名，多个类名用空格分隔：
<div class="red font35">标题文本</div>.red {
color: red;
}
.font35 {
font-size: 35px;
}属性选择器
/* 选择具有title属性的元素 */
[title] {
border: 1px solid #ccc;
}
/* 选择href属性值以"https"开头的元素 */
[href^="https"] {
color: green;
}
/* 选择class属性包含"button"的元素 */
[class*="button"] {
cursor: pointer;
}伪类选择器
/* 鼠标悬停效果 */
a:hover {
text-decoration: underline;
}
/* 访问过的链接 */
a:visited {
color: purple;
}
/* 第一个子元素 */
li:first-child {
font-weight: bold;
}伪元素选择器
/* 在元素内容之前插入 */
.box::before {
content: "→";
}
/* 在元素内容之后插入 */
.box::after {
content: "←";
}
/* 选择第一行 */
p::first-line {
font-size: 120%;
}选择器优先级
优先级从高到低：
- !important
- 内联样式
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 元素选择器、伪元素选择器
- 通配符选择器
/* 优先级示例 */
#header {
color: blue !important; /* 最高优先级 */
}
.nav {
color: red; /* 次高优先级 */
}
p {
color: green; /* 较低优先级 */
}使用建议
- 避免过度使用ID选择器
- 优先使用类选择器
- 选择器不要嵌套太深（一般不超过3层）
- 适当使用组合选择器提高代码复用性
- 注意权重问题，避免使用!important