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

代码段示范：

＆＃13;

* {
  box-sizing: border-box;
}

ul:empty + .test {
  background: black;
  color: white;
  padding: 5px;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

<ul></ul>
<div class="test">Testing here</div>

＆＃13;

相邻兄弟组合（+）分隔两个选择器和仅当第二个元素立即跟在第一个元素后才匹配第二个元素 element，两者都是同一父元素的子元素。 ^ref
：空 CSS pseudo-class表示没有的任何元素儿童。子元素可以是元素节点或文本（包括空格）。注释或处理说明不影响是否元素被认为是空的。 ^ref

Answer 2

除 UncaughtTypeError 的答案外。

如果有一个孩子，有一个选择器public class CustomContractResolver : DefaultContractResolver { private static readonly ArgumentConverter Converter = new ArgumentConverter(); protected override JsonContract CreateContract(Type objectType) { var contract = base.CreateContract(objectType); contract.Converter = Converter; return contract; } }用于将css应用于元素。

检查:not(:empty)以获取有关选择器的更多详细信息。

:not(:empty)

* {
  box-sizing: border-box;
}
ul:not(:empty) + .test {
  background: black;
  color: white;
  padding: 5px;
}

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

2 个答案: