Question

我正在尝试选择一个H1元素，它是其组中的第二个子元素，但它似乎不起作用。 CSS如下所示

.midLeftIn h1:nth-child(1) {
    color:#f89859;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    border-bottom: solid 2px #FFF;

}

.midLeftIn h1:nth-child(2) {
    color:#000;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    border-bottom: solid 2px #FFF;

}

WordPress out将HTML放在如下所示

<div class="midLeftIn">



          <h1>We&#8217;re willing to help</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>

<p>Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta.  <div style='height:25px; padding:0; margin:0; '  ></div></p>

<h1>Another good thing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>
<p>Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta.   <div style='height:25px; padding:0; margin:0; '  ></div></p>

<h1>Something nice goes here</h1>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed fermentum purus. Integer gravida, neque ac placerat consequat, diam dolor gravida nibh, a venenatis tortor justo non velit. Cras fringilla tincidunt justo eu pulvinar. Phasellus at mauris nec odio sagittis gravida. Etiam bibendum semper libero in dapibus.</p>

<p style="text-align: justify;">Phasellus vulputate, lectus vitae rhoncus dapibus, eros magna bibendum felis, eget placerat neque diam id arcu. Integer vel fringilla erat. Nulla volutpat placerat elit at ornare.Praesent accumsan ultrices mi, sed cursus magna adipiscing eu. Aenean porttitor nisi quis arcu luctus non imperdiet elit porta. <div style='height:25px; padding:0; margin:0; '  ></div>

</div><!-- End MidLeftIn -->





</div><!-- End MidLeftIn -->

Answer 1

您是否尝试选择每个第h1个孩子？

如果是这样，您需要使用:nth-of-type()来区分p和div中的任何其他兄弟姐妹，因为:nth-child()只会考虑到.midLeftIn h1:nth-of-type(1) .midLeftIn h1:nth-of-type(2)的位置相对于其所有兄弟姐妹的元素：

{{1}}

CSS第一个第二个孩子问题

1 个答案: