选择器
一句话解释
选择器是 CSS 里用来“挑出”某些 HTML 元素的规则,告诉浏览器接下来这些样式要应用到哪些元素上。
用大白话说
选择器(selector)是 CSS 规则的开头部分,用来指定“这条样式要应用到哪些元素”。
常见选择器:
- 标签选择器:
p { ... }选中所有<p>标签 - 类选择器:
.btn { ... }选中所有 class 为btn的元素 - ID 选择器:
#title { ... }选中 id 为title的那个元素 - 组合选择器:
div p { ... }选中div里的所有p
选择器还能组合、嵌套,写法非常灵活。掌握选择器是写好 CSS 的第一步——你得先“选中”元素,才能给它设置样式。选择器优先级也影响最终样式:ID 选择器 > 类选择器 > 标签选择器。
示例
css
p { color: gray; } /* 标签选择器 */
.btn { background: blue; } /* 类选择器 */
#title { font-size: 32px; } /* ID 选择器 */
div p { margin: 10px; } /* 后代选择器 */p 选所有段落,.btn 选 class 为 btn 的元素,#title 选 id 为 title 的元素,div p 选 div 里的 p。
工作原理
- 在 CSS 规则的开头写选择器
- 浏览器按选择器在 DOM 树里找出所有匹配的元素
- 把花括号里的样式声明应用到这些元素上
- 多条规则冲突时按优先级决定谁生效
常见混淆
容易混淆的对象: 类
关键区别: 类(class)是 HTML 元素上的属性(
class="btn"),选择器是 CSS 里用来选中元素的规则(.btn)。类是“标记”,选择器是“按标记找元素”。
相关术语
相关资源
相关课程
- CSS 课程
学习各种 CSS 选择器
学习基础知识
通过结构化课程深入理解这个主题。
解读错误信息
用大白话解释常见错误——什么意思、为什么发生、如何修复。