如何編輯不包含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;
}

不過，這真是太不可思議了！