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

Posted 2023-03-06

【中文标题】如果 ul 项目包含 li 项目，如何将 css 应用于外部 div

【英文标题】：How to apply css to outer div if ul item contains li items

【发布时间】：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 方法。

【问题讨论】：

用这个版本的CSS（也许用css4）是不可能的，你可以用JS来实现。

CSS selector - element with a given child的可能重复

我想给 div 应用一个类这是什么意思？

@BhuwanBhatt ：仅在一种情况下将样式应用于类测试

【参考方案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>