如何编辑不包含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标签，另一个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

 $('.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');

Answer 2

并不是最好的处理方式，但是如果您不能编辑html，则可以通过以下操作来定位CSS：

http://jsfiddle.net/42amv1xj/

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

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

不过，这真是太不可思议了！