如果ul项包含li项，如何将css应用于外部div

Question

我在渲染的HTML页面中有两个案例。

情况1：

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

案例2：

<ul></ul>
<div class="test"></div>

在案例1中，如果CSS元素包含div元素，我想将ul应用于li）。我不想要任何案例2.我想要一个没有任何jQuery / JavaScript的纯CSS方法。

Answer 1

除了UncaughtTypeError的答案。

如果有一个孩子，有一个选择器:not(:empty)用于将css应用于元素。

有关选择器的更多详细信息，请查看:not(:empty)。

* {
  box-sizing: border-box;
}
ul:not(:empty) + .test {
  background: black;
  color: white;
  padding: 5px;
}

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

<ul></ul>
<div class="test">Testing here</div>

Answer 2

使用Adjacent sibling combinator（+）和:emptyref伪类可以实现预期的行为，例如：

ul:empty + .test

代码片段演示：

* {
  box-sizing: border-box;
}

ul:empty + .test {
  background: black;
  color: white;
  padding: 5px;
}

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

<ul></ul>
<div class="test">Testing here</div>