如何使用JavaScript定位三级div并修改样式以隐藏红色Warning文本

方法1：使用CSS属性选择器（直接匹配内联样式） #

因为目标div带有内联的color: red样式，你可以通过属性选择器精准定位它，再设置display: none。由于内联样式优先级高，需要加!important确保覆盖：

#Zone .MR-Widget .Content div[style="color: red"] {
  display: none !important;
}

方法2：优化HTML结构（更推荐的方案） #

如果可以修改HTML代码，给目标div添加一个专属类名（比如warning-text），这样选择器更清晰，也避免结构变化导致失效：
修改后的HTML片段：

<div class="Content">
  <!-- 其他子元素 -->
  <div class="warning-text" style="color: red"> Warning </div>
</div>

对应的CSS：

.warning-text {
  display: none;
}

方法3：利用层级位置选择器 #

如果目标div始终是.Content下的最后一个div子元素，可以用:last-child选择器：

#Zone .MR-Widget .Content div:last-child {
  display: none;
}

⚠️ 注意：如果后续.Content下新增了其他div元素，这个选择器会定位到新的最后一个元素，所以仅在结构固定时使用。

方法4：JavaScript动态修改 #

如果无法修改CSS或HTML，可通过JS获取元素并修改样式：

const warningElement = document.querySelector('#Zone .MR-Widget .Content div[style="color: red"]');
if (warningElement) {
  warningElement.style.display = 'none';
}

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