Question

我正在尝试快速修复wordpress网站上破坏的内容。问题是，其他人创造了汤三明治，我正在修理它。我有一个元素显示在页面的两个不同部分。第一个是后状态表单，第二次显示在注释添加部分，在页面上无限重复。代码块适用于注释，但不适用于状态表单，因此我不想简单地隐藏它，直到我弄清楚如何找到A）找到代码生成的位置，B）修复问题。

该元素具有在元素加载时动态应用（假设为javascript）的样式。它开始隐藏，然后管道下方的东西显示它。

以下是我的代码的样子，首先是有效的元素：

<div class="activity-comments">
  <div class="audio_controls fresh" style>
    ....
  </div>
</div>

破碎的街区：

<div id="whats-new-post-in-box">
  <div class="audio_controls fresh" style="display: block;">
    ...
  </div>
<div>

所以在第一个块中，代码没有样式，因为出于某种奇怪的原因，无论如何编写它都会留下样式标记而没有任何样式可以应用（完全愚蠢和格式错误的代码）。但是在第二个元素中，它是一个破坏的元素，它有一个显示：在运行时动态写入的块。我正在试图弄清楚如何强制它显示：无。我已经尝试过了js，但是我不知道如何正确调用它（不知道如何调用嵌套元素，我只想要嵌套ID中的audio_control而不是其他类）。

任何人对我都有任何想法？

Answer 1

您可以使用CSS：

#whats-new-post-in-box > .audio_controls.fresh {
    display: none !important;
}

!important样式规则可以覆盖内联样式规则（除非内联样式规则也 !important）。

或者，使用any modern browser上的JavaScript：

var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
    list[n].style.display = "none";
}

对于旧版浏览器来说，这更令人痛苦：

var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
    if (elm.className &&
        elm.className.match(/\baudio_controls\b/) &&
        elm.className.match(/\bfresh\b/)) {

        elm.style.display = "none";
    }
    elm = elm.nextSibling;
}

显然，对于两个JS解决方案，你需要在之后运行代码，无论它是什么样的设置样式......

Answer 2

非常确定您可以为#whats-new-post-in-box .audio_controls编写CSS规则，并使用!important进行标记。

Answer 3

另一种隐藏内部div的方法，这需要jQuery：

$('div.audio_controls', $('#whats-new-post-in-box')).hide();

此代码选择audio_controls类的所有div元素，这些元素位于ID为whats-new-post-in-box的元素内，并隐藏它们。

试图覆盖动态生成的内联样式

3 个答案: