CSS 三大机制：层叠、继承、冲突

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