CSS选择器与优先级详解（一）
最新回答
一花一树开
2026-02-16 04:52:59
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
HTML
CSS
执行效果：
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML
CSS
执行效果：
c.元素选择器：通过note节点名称匹配元素。
HTML
CSS
2.属性选择器：
注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器
示例如下：
实现效果如下：
示例如下：
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
参考：
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
热门标签
