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