带class的Div样式不生效，Input与Label正常，求技术排查

排查方向 #

• 类选择器写法错误：检查CSS中是否正确使用类选择器语法——必须以.开头，比如.features { ... }。漏写点号会被当成元素选择器，无法匹配带class="features"的div。
• 拼写或大小写不一致：CSS类选择器区分大小写，HTML中div的class如果是Features，但CSS里写.features就不会生效；同时要确保class名称拼写完全一致，比如别把features写成feature。
• 样式优先级被覆盖：如果之前有ID选择器（比如#survey-form div）或更具体的选择器，会覆盖类选择器的样式。打开浏览器开发者工具（F12），查看该div的样式面板，若.features的规则被划掉，说明存在优先级更高的规则。
• 规则作用对象错误：如果想给div内的label、input设置样式，但只写了.features { ... }，这只会作用于div本身，不会影响子元素。此时需要用后代选择器，比如.features label { ... }。

针对你的代码的修复示例 #

假设你想让.features区块有间距，且内部元素换行显示，正确的CSS写法如下：

/* 给features区块本身设置样式 */
.features {
  margin: 1.5rem 0;
  padding: 0.8rem;
}

/* 给features内部的子元素设置样式 */
.features label,
.features select {
  display: block;
  margin-bottom: 0.6rem;
}

验证步骤 #

1. 按F12打开浏览器开发者工具，定位到class="features"的div元素；
2. 在右侧“样式”面板中查看是否加载了.features相关规则；
3. 若规则被划掉，可通过增加选择器权重（比如#survey-form .features）提升优先级，或排查冲突规则。

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