Question

我想知道如何将CSS应用到h2，除非它直接跟着paragraph。在这种情况下，将CSS应用于paragraph。

我有几个部分，每部分都有自己的头衔。但是，有时它会跟着一个副标题。我在每个标题上都应用了底部边距，但是如果有副标题，那么它之间不应该有边距。在这种情况下，底部边距应该应用于h2下面的段落。

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

我可以为每个h2提供一个字幕，其中包含＆＃34; gotSubtitle＆＃34;所以我可以让他们分开，但那不是“顺利”。这样做的方法。

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打包成{{1}并将底部边距应用于div。没有条件检查，它也应该工作。

而asked many times有一个adjacent sibling selector，但你不能选择前面的元素，只有<强>跟随的。但是，可以将底部边距应用于每个 div，然后将相同的底部边距和负上边距应用于以下{{1}元素。
虽然对我来说这一切都很干净，但它不需要修改你的HTML代码这是一个example。

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>

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

4 个答案:

另一种可能性：