选择器进阶
层叠与优先级
变量与自定义属性
Sass/Less基础
BEM规范
现代CSS新特性
练习与拓展
常用高级选择器
- 属性选择器：[type="text"]、[data-id]
- 伪类选择器：:hover、:nth-child、:not()
- 伪元素选择器：::before、::after
- 组合选择器：.a > .b、.a + .b、.a ~ .b
<style>
input[type="text"] { border: 1px solid #386ff6; }
li:nth-child(2n) { background: #e3eafe; }
.btn::after { content: '→'; margin-left: 8px; }
</style>
<input type="text" />
<ul><li>1</li><li>2</li><li>3</li></ul>
<button class="btn">按钮</button>