没有孩子的选择器？

Question

无论元素的深度如何，我怎么能让最后一个div总是红色？

输出：

＆＃13;

＆＃13;

.box > div > div > div > div {
  background: #ff0000;
}

＆＃13;

<div class="box">
  <div>
    The first paragraph.
    <div>
      The second paragraph.
      <div>
        The third paragraph.
        <div>
          The fourth paragraph. (is red)
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

据我所知，我认为没有编辑你的html结构（id / class）是不可能的。

我认为最好的解决方案是javascript

let element = document.querySelector('.box')
let temp = element
while (temp = temp.getElementsByTagName('div')[0]) {
    element = temp
}
element.style.backgroundColor = 'red'

此脚本获取box元素并将所有div子项循环到最后一个，然后将背景颜色设置为红色。

重要的是要注意，如果没有子元素，这会将框元素设置为红色。您可以根据需要在设置背景颜色之前进行快速检查。

if (element !== document.querySelector('.box')) {
    element.style.backgroundColor = 'red'
}

Answer 2

对div执行此操作：

<div class="whatever">

然后添加css;

.whatever
{
        background: #ff0000;
}