Web-Inspector：如何在层次结构中找到设置背景颜色的 DOM 元素？

Question

是否有任何功能或扩展允许使用任何浏览器的 Web-Inspector 查找样式元素，例如 DOM 层次结构中的背景颜色？

让我们考虑一个可能如下所示的 DOM 树：

.div3 {
  background-color: green;
}

<div class="div0">
  <div class="div1">
    <div class="div2">
      <div class="div3">
        <div class="div4">
          <div class="div5">
            <div class="div6">
              <div class="div7">
                <div class="div8">
                  Some Text
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
                

元素选择工具将选择 .div8。现在您必须上树并手动搜索设置绿色的第一个 div。有没有可用的树搜索？例如找到第一个在树上应用样式“背景颜色”的 div？搜索框仅查找应用于当前 DOM 元素的样式。

Answer 1

选择所有父元素，循环它们并检查background-color。在 web 检查器中在console 标签中编写代码

$(document).ready(function() {
  var parents = $('.div8').parents();

  $.each(parents, function() {
    if ($(this).css('background-color') != 'transparent' && $(this).css('background-color') != 'rgba(0, 0, 0, 0)') {
      console.log($(this).attr('class') + ':' + $(this).css('background-color'));
      return false;
    }
  });
});

.div3 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div0">
  <div class="div1">
    <div class="div2">
      <div class="div3">
        <div class="div4">
          <div class="div5">
            <div class="div6">
              <div class="div7">
                <div class="div8">
                  Some Text
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>