html - 如果 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 中，如果 ul 元素包含 ，我想将 CSS 应用于 div li 元素)。对于案例 2，我不想要任何东西。我想要一种没有任何 jQuery/JavaScript 的纯 CSS 方法。

Answer 1

使用 Adjacent sibling combinator 可以实现预期的行为 (+) 和 :empty ^ref 伪类，例如:

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>

1. The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. ^ref

2. The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments or processing instructions do not affect whether an element is considered empty or not. ^ref