Bootstrap行元素CSS样式不生效问题求助

嘿，我一眼就揪出问题所在了——你的CSS选择器组合方式写错啦！

你在HTML里给div设置的是class="row bot"，这说明这个div同时拥有row和bot两个类，但你的CSS选择器写的是.row .bot（中间带空格），这是后代选择器，它会去匹配.row元素内部的.bot子元素，而不是同时携带这两个类的元素本身。这就导致你的样式根本找不到目标元素，自然不会生效。

修正后的CSS代码 #

把选择器改成不带空格的.row.bot，就能正确选中同时带有row和bot类的div了：

body{ height: 2000px; } 
.row.bot{ 
  height: 150px; 
  background-color: blue; 
}

额外排查点（如果样式仍不生效） #

• 检查Bootstrap的CSS文件是不是在你自定义CSS文件之前引入的？如果你的CSS加载顺序在Bootstrap之前，它的样式可能会被Bootstrap的默认样式覆盖。
• 有没有其他更高优先级的样式（比如内联样式、ID选择器）干扰？不过在你的代码里，子元素的内联背景色只会影响自身，不会覆盖父级.row的样式，所以这个问题暂时不用担心。

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