CSS stands for Cascading Style Sheets, and that first word cascading is incredibly important to understand -- the way that the cascade behaves is key to understanding CSS.
🎯 CSS 三大机制一句话总结
层叠 把多个选择器的样式全加上；继承 让子元素自动拥有父元素的部分样式；冲突时，优先级高的说了算。
📚 一、层叠（Cascading）
一个标签可以被多个选择器同时选中，每个选择器都能给它加样式，最终这个标签会应用所有选择器赋予的全部样式。
示例：
html
html
<p id="myP" class="cp">文字</p>css
css
p { color: red; } /* 标签选择器 */
#myP { background: yellow; } /* ID选择器 */
.cp { font-size: 20px; } /* 类选择器 */最终效果：红色文字 + 黄色背景 + 20px字体大小 → 这就是层叠。
💡 实际场景 ：样式可能分散在多个CSS文件中，不容易一眼看出都加了什么。这时用 浏览器开发者工具（F12 or Option+Command+J） 的"元素"面板，点击小箭头选中标签，右侧 Styles 区域会清晰列出所有选中的选择器及其样式。
🧬 二、继承（Inheritance）
子标签可以自动继承 父标签的部分样式，但不是全部。
-
✅ 能继承 ：作用于内容 的样式，如
color（文字颜色）、font-size（字体大小）、font-family等。 -
❌ 不能继承 ：作用于元素自身 的样式，如
width、height、background（背景图）、border等。
示例：
css
css
div {
color: red; /* 作用于内容 → 子元素继承 */
font-size: 20px; /* 作用于内容 → 子元素继承 */
width: 200px; /* 作用于元素自身 → 子元素不继承 */
height: 100px; /* 作用于元素自身 → 子元素不继承 */
}html
html
<div>
<span>我是子元素</span> <!-- 会继承红色和20px，但不会继承宽高 -->
</div>💡 查看继承 ：在开发者工具中选中子元素，右侧 Styles 面板里会有一块 Inherited from XXX，里面显示的就是从父级继承来的样式。
⚔️ 三、冲突（优先级 / 特殊性）
当多个选择器同时选中同一个标签，并且设置了相同属性但不同值 时，就产生了冲突。此时由选择器优先级决定最终用哪个。
基础选择器优先级排序（由高到低）：
text
diff
ID选择器 (#id) > 类选择器 (.class) > 标签选择器 (div/p) > 通配符选择器 (*)示例：
css
css
p { color: blue; } /* 标签选择器 */
.cp { color: green; } /* 类选择器 */
#myP { color: red; } /* ID选择器 */最终文字颜色是 红色，因为 ID 选择器优先级最高。
💡 查看冲突结果 ：在开发者工具 Styles 面板中，被划掉的样式就是被更高优先级覆盖掉的。可以直观看到哪个选择器"赢了"。
🛠️ 开发者工具使用口诀
F12 打开，点小箭头，选中元素看右侧。
Styles → 看层叠了哪些样式，谁冲突被划掉。
Inherited → 看继承了父级的哪些样式。
掌握这三大机制，你写样式"没生效"的问题，90% 都能自己解决。
📝 一句话记牢
层叠是叠加，继承是传功，冲突看谁大。
Referrence:
https://www.bilibili.com/video/BV1qJrgYNEKG?t=1875.1&p=57