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

问题描述 投票:0回答:2

我在渲染的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方法。

html css css3 css-selectors
2个回答
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>

7
投票

使用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>
  1. 相邻的兄弟组合子(+)将两个选择器分开,只有当它紧跟在第一个元素之后才匹配第二个元素,并且它们都是同一父元素的子元素。 ref
  2. :empty CSS pseudo-class表示没有子元素的任何元素。子元素可以是元素节点或文本(包括空格)。注释或处理指令不会影响元素是否为空。 ref
© www.soinside.com 2019 - 2024. All rights reserved.