CSS 选择器
选择器决定样式作用于哪些元素，是 CSS 的核心。掌握选择器才能精准控制页面元素。
基础选择器
- 标签选择器：
p，选中所有 p 标签； - 类选择器：
.classname，选中指定类的元素； - ID 选择器：
#idname，选中指定 id 的元素（唯一）； - 通配选择器：
*，选中所有元素。
组合与伪类
后代选择器 div p、子代选择器 div > p、相邻兄弟 h1 + p。伪类如 :hover（悬停）、:first-child（第一个子元素）、:nth-child(n)（第 n 个）用于状态和位置选择。
代码示例
<style>
/* 标签选择器 */
p { font-size: 14px; }
/* 类选择器 */
.card { border: 1px solid #ddd; padding: 12px; }
/* ID 选择器 */
#logo { width: 120px; }
/* 后代选择器 */
.nav a { text-decoration: none; }
/* 伪类 */
.btn:hover { background: #3b5bdb; color: #fff; }
li:first-child { font-weight: bold; }
</style>📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
color: #333; | 文字颜色 |
background: #fff; | 背景色 / 背景图 |
font-size: 16px; | 字号 |
font-family: Arial; | 字体 |
font-weight: bold; | 字重（加粗） |
margin: 10px; | 外边距（上右下左） |
padding: 10px; | 内边距 |
border: 1px solid #ccc; | 边框：粗细 样式 颜色 |
border-radius: 8px; | 圆角 |
width: 100%; | 宽度 |
height: 200px; | 高度 |
display: flex; | 弹性布局（现代布局主力） |
display: none; | 隐藏元素 |
position: relative / absolute / fixed; | 定位方式 |
top / left / right / bottom | 定位偏移 |
text-align: center; | 文字水平对齐 |
line-height: 1.6; | 行高 |
overflow: hidden; | 内容溢出处理 |
box-shadow: 0 2px 8px rgba(0,0,0,.1); | 阴影 |
transition: all .3s; | 过渡动画 |
cursor: pointer; | 鼠标手型 |
z-index: 10; | 层叠顺序 |
max-width: 1200px; margin: 0 auto; | 容器居中（经典写法） |
@media (max-width: 768px) {} | 响应式断点 |
:hover | 鼠标悬停状态 |