HTML的section元素为何不受CSS样式影响？这类问题该如何调试

你当前案例的直接问题可快速修复：你的代码中<section>设置的是class="jumbo"，但CSS中使用了ID选择器#jumbo，二者不匹配，将CSS中的#jumbo替换为类选择器.jumbo即可解决本次问题。

通用的CSS样式不生效排查技巧如下：

• 核对选择器匹配规则：ID选择器以#开头，对应HTML元素的id属性；类选择器以.开头，对应HTML元素的class属性；标签选择器直接对应HTML标签名，注意检查拼写、大小写是否和HTML中一致。
• 确认CSS文件加载正常：按F12打开浏览器开发者工具，切换到「网络」面板，筛选CSS资源，查看你编写的样式文件是否加载成功，是否返回404错误，文件路径拼写是否正确。
• 排查样式优先级冲突：当多个CSS规则同时匹配同一个元素时，优先级更高的规则会覆盖低优先级规则，优先级从高到低为：!important标记的样式 > 元素行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器。在开发者工具的「元素」面板选中目标元素，查看样式栏中你编写的规则是否被划掉，被划掉即说明被更高优先级的规则覆盖。
• 检查属性语法错误：如果CSS属性名、属性值拼写错误（比如把color写为colour，15px多写空格成15 px），浏览器会直接忽略该条规则，在开发者工具样式栏中，无效属性旁会显示黄色警告标识。
• 确认样式作用域限制：如果使用Vue、React等前端框架，检查是否给样式加了scoped作用域限制，导致无法选中子组件内的元素或者组件外的元素。
• 排除缓存干扰：浏览器可能会缓存旧版本的CSS文件，可通过Ctrl+F5强制刷新页面，或者给CSS文件路径添加版本后缀（如style.css?v=2024）避免缓存影响。
• 核对目标元素是否存在：确认你要设置样式的元素确实在DOM中存在，是否被JS动态移除，或者条件渲染未触发导致元素没有生成。

内容的提问来源于stack exchange，提问作者Ryan Miles