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标签而另一个div没有。

CSS ：

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

上方显示了div test的CSS。

我想要做的是将其他CSS应用于不包含H1标记的div。

如果div包含H1标记：

什么都不做

如果div不包含H1标记：

将以下CSS应用于该特定div

font-size: 30px;

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可以使用:not和:has的选择器

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

Answer 2

不是最好的做事方式，但如果你不能编辑html，那么你可以通过这样做来定位CSS：

http://jsfiddle.net/42amv1xj/

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

.test h1,
h1 ~ p {
    font-size: 20px;
}

虽然这真是太棒了！

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

2 个答案: