将 CSS 应用于对象，除非后跟段落

Question

我想知道如何将CSS应用于h2，除非它后面紧跟着一个paragraph。在这种情况下，请将 CSS 应用于paragraph 。

我有几个部分，每个部分都有自己的标题。但是，有时它后面会跟一个字幕。我为每个标题应用了下边距，但如果有副标题，则两者之间不应该有边距。在这种情况下，下边距应适用于h2下方的段落。

但是..我该如何解决这个问题？

我可以给每个带有副标题的 h2 一个带有"gotSubtitle"的类，这样我就可以将它们分开，但这不是这样做的"平滑"方法。

Answer 1

刚刚做到了。

article h2:not(.gotsubtitle){
    color: red;
}

<article>
    <h2 class='gotsubtitle'>Oi</h2>
    <p>Test</p>
</article>
<article>
    <h2>Oi</h2>
</article>

添加了类和:not选择器。 ;)不太顺利，但是...是我们可以用纯 CSS 做的。

另一种可能性：

使用jQuery...

$('article').has('p').addClass('title');

article.title h2{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
        <h2>Oi</h2>
        <p>Test</p>
    </article>
    <article>
        <h2>Oi</h2>
    </article>

Answer 2

试试这个它会起作用：

h2.gotSubTitle{
/*apply CSS to an h2*/
}
p + h2.gotSubtitle{
/*apply CSS to an h2 which is directly followed by a paragraph*/
}

Answer 3

向每个元素添加class="..."肯定会起作用，但我认为最简单（并且仍然干净）的解决方案是将h2和paragraph打包到一个div中，并将底部边距应用于div。 没有条件检查，它应该也可以工作。

正如多次询问的那样，有一个相邻的同级选择器，但你不能用它选择前面的元素，只能选择后面的元素。但是，可以将下边距应用于每个h2然后将相同的下边距和负上边距应用于以下paragraph元素。
虽然对我来说，一切都很干净，但它不需要修改你的 html 代码。
下面是一个示例。

Answer 4

var headerTag = document.querySelectorAll("h2");
for(var i = 0; i < headerTag.length; i++){
    var nextELement = headerTag[i].nextSibling.nextSibling;    
    if( (/P/).test(nextELement.tagName)) { 
        headerTag[i].classList.add("no")}
}

h2{
    background:red
}
h2.no{
    background: none
}

<section>
    <h2>header is following</h2>
    <h2>paragraph is following</h2>
    <p>i am a paragraph :-)</p>
</section>