javascript - 如何编辑不包含 H1 标签的 div 的 CSS？

Question

有两个div:

<div class="test">
<h1>This is a test</h1>
<p>Welcome to the test</p>
</div>

<div class="test">
<p>Welcome to the test</p>
</div>

如您所见，有两个属于同一类的 div，但是一个 div 有 H1 标签，另一个没有。

CSS:

.test {
font-size: 20px;
color: #fff
}

上面显示了 div test 的 CSS。

我想做的是将额外的 CSS 应用到不包含 H1 标签的 div。

如果 div 包含 H1 标签:

• 什么都不做

如果 div 不包含 H1 标签:

• 将以下 CSS 应用于该特定的 div

字体大小:30px;

Answer 1

$('.test:not(:has(h1))').css('font-size', '30px');

.test {
font-size: 20px;
color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
<h1>This is a test</h1>
<p>Welcome to the test</p>
</div>

<div class="test">
<p>Welcome to the test</p>
</div>

您可以将选择器与 :not 一起使用和 :has喜欢

$('.test:not(:has(h1))').css('font-size', '30px');