课程进度 28% · 第6/20章第6/20章 · 标签 1/2
— 1 —
选择器进阶
- 属性选择器：[type="text"]、[data-id]
- 伪类选择器：:hover、:nth-child、:not()
- 伪元素选择器：::before、::after
- 组合选择器：.a > .b、.a + .b、.a ~ .b
css
1
/* 高级选择器 */
2
[data-active="true"] { border-color: blue; }
3
li:nth-child(odd) { background: #f5f5f5; }
4
p:not(.intro) { color: gray; }
5
.card::before { content: "★"; color: gold; }
— 2 —
层叠与优先级
- 优先级：!important > 内联 > ID > 类/伪类 > 元素 > 通配
- 同优先级后定义的覆盖前定义的
- 避免滥用!important
变量与自定义属性
css
1
:root {
2
--primary: #1890ff;
3
--spacing: 16px;
4
}
5
.button {
6
background: var(--primary);
7
margin: var(--spacing);
8
}
选择器伪类伪元素优先级CSS变量