Question

我有一个代码，并针对我的问题进行了简化。我有一个nth-child（2）css，在第一个示例中工作正常，但在第二个示例中工作不正常。如果我删除“空” div，它可以正常工作。如何使用CSS解决此问题，而不删除“空” div

<style>.av-special-heading-tag:nth-child(2) { background-color:#ff0; padding: 6px !important; text-transform:uppercase; }

</style>


<h1 class="av-special-heading-tag " itemprop="headline">Latest news</h1>
<h1 class="av-special-heading-tag " itemprop="headline">Latest news</h1>

<div id="blog" >
    <h1 class="av-special-heading-tag " itemprop="headline">Latest news</h1>
    <div>
        <h1 class="av-special-heading-tag " itemprop="headline">Latest news</h1>
    </div>
</div>

我认为解决方案更像这样

#blog .avia-builder-el-9 :nth-child(1) { background-color:#ff0; padding: 6px !important; text-transform:uppercase; }
#blog .avia-builder-el-12:nth-child(1) { background-color:#f00; padding: 6px !important; text-transform:uppercase; }</style>

<div id="blog" class="avia-section main_color avia-section-no-padding avia-no-border-styling avia-bg-style-scroll  avia-builder-el-7  el_after_av_section  el_before_av_section   container_wrap fullsize" style="background-image: ">


        <div style="padding-bottom:10px; " class="av-special-heading av-special-heading-h1  blockquote modern-quote  avia-builder-el-9  el_before_av_blog  avia-builder-el-first  ">
            <h1 class="av-special-heading-tag " itemprop="headline">LAATSTE NIEUWS</h1>
        </div>
        <div style="padding-bottom:10px; " class="av-special-heading av-special-heading-h1  blockquote modern-quote  avia-builder-el-12  el_before_av_textblock  avia-builder-el-first   ">
            <h1 class="av-special-heading-tag " itemprop="headline">HKL AGENDA</h1>
        </div>

但是第二个avia-builder-el-12没有变成红色

第二个div中的nth-child标签不起作用，为什么

0 个答案: