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

【问题标题】：How to apply css to outer div if ul item contains li items如果 ul 项目包含 li 项目，如何将 css 应用于外部 div
【发布时间】：2018-06-13 21:50:16
【问题描述】：

我呈现的 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 元素包含 li 元素，我想将 CSS 应用于 div）。对于案例 2，我不想要任何东西。我想要一个没有任何 jQuery/JavaScript 的纯 CSS 方法。

【问题讨论】：

【解决方案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>

相邻兄弟组合器 (+) 分隔两个选择器和只有当它立即跟在第一个元素之后才匹配第二个元素元素，并且两者都是同一个父元素的子元素。 ^ref
:empty CSS pseudo-class 表示任何没有孩子们。子节点可以是元素节点或文本（包括空格）。评论或处理指令不影响是否一个元素是否被认为是空的。 ^ref

【讨论】：

【解决方案2】：

除了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>

【讨论】：