如果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

使用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. 在相邻的兄弟组合子(+)分隔两个选择器和仅当它的第二个元素相匹配立即跟随第一元件,和两者都相同的父元素的子元素. ^REF

2. 的:空 CSS 伪类代表没有孩子的任何元素.子元素可以是元素节点或文本(包括空格).注释或处理指令不会影响元素是否为空.^REF