0

我正在尝试选择一个 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 输出的 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 -->
4

1 回答 1

1

您是否要选择每个第 n 个h1孩子？

如果是这样，您需要改为使用:nth-of-type()将它们p与您的 中的任何其他兄弟姐妹区分开来div，因为:nth-child()仅考虑元素相对于其所有兄弟姐妹的位置：

.midLeftIn h1:nth-of-type(1)
.midLeftIn h1:nth-of-type(2)
于 2012-08-05T17:23:51.420 回答