如何用CSS修改无class/id的div标签 相邻选择器设置高度不生效

你的样式不生效核心原因有两个：

• #dPopupBG+div这个相邻兄弟选择器本身语法正确，确实能匹配到#dPopupBG后面紧跟的那个设置了height:100px的div，但内联样式（写在标签style属性里的样式）优先级高于外部CSS文件的普通规则，所以你写的height:80px被内联的height:100px直接覆盖了。
• 你贴的代码里<div style="height:100px;"><div>属于未闭合的无效标签，浏览器渲染时会自动修正DOM结构，可能导致实际DOM层级和你写的代码不一致，也会干扰样式匹配和布局效果。

按推荐优先级排序：

1. 直接修改HTML源码（最优方案）
   找到对应位置的HTML代码，直接修改内联样式的height值即可，不需要额外写CSS：

   <!-- 把原来的100px改成你需要的高度，不需要占位直接设为0或者删掉这个空div -->
   <div style="height:80px;"></div>
   

   记得把未闭合的div标签补全，避免结构错乱。

2. CSS强制覆盖内联样式
   如果不方便修改HTML源码，可以给CSS属性加!important提升优先级，强制覆盖内联样式：

   #dPopupBG + div {
     height: 80px !important;
   }
   

   提示：!important会打破正常的CSS优先级流，非必要不要大量使用，否则会提升后续样式维护的成本。

3. 给目标元素加专属类名（长期维护推荐）
   相邻兄弟选择器+依赖DOM的相邻关系，如果后续代码调整在两个元素中间插入新节点，选择器就会失效。可以给这个占位div加专属类名，精准匹配：
   先修改HTML加类名：

   <div class="header-gap" style="height:100px;"></div>
   

   再写CSS规则：

   .header-gap {
     height: 80px !important;
   }
   

• 相邻兄弟选择器A+B：匹配和A同级、且紧跟在A后面的第一个B元素，你最初写的选择器语法没有问题。
• CSS优先级从高到低排序：
  • 带!important标记的样式
  • 元素内联样式（style属性内的样式）
  • ID选择器
  • 类选择器、属性选择器、伪类选择器
  • 标签选择器、伪元素选择器
• 无效HTML结构会导致浏览器自动重构DOM，实际渲染的结构可能和你手写的代码存在差异，很容易引发选择器匹配失败、布局错乱问题，写代码时要注意标签闭合。

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