Skip to content

选择器

一句话解释

选择器是 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。

工作原理

  1. 在 CSS 规则的开头写选择器
  2. 浏览器按选择器在 DOM 树里找出所有匹配的元素
  3. 把花括号里的样式声明应用到这些元素上
  4. 多条规则冲突时按优先级决定谁生效

常见混淆

  • 容易混淆的对象:

    关键区别: 类(class)是 HTML 元素上的属性(class="btn"),选择器是 CSS 里用来选中元素的规则(.btn)。类是“标记”,选择器是“按标记找元素”。

相关术语

相关资源

相关课程

学习基础知识

通过结构化课程深入理解这个主题。

查看课程

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误

← 返回术语表