CSS第一个第二个孩子问题

CSS第一个第二个孩子问题,css,css-selectors,Css,Css Selectors,我试图选择一个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;

我试图选择一个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>


您是否正在尝试选择每个第n个h1子级

如果是这样,则需要使用:nth of type将它们与p和div中的任何其他同级区分开来,因为:nth child只考虑元素相对于其所有同级的位置:


BoltClock类型代表什么。我这么问是因为当我添加它时,它改变了很多东西。thanksIt表示元素标记名。
</div><!-- End MidLeftIn -->





</div><!-- End MidLeftIn -->
.midLeftIn h1:nth-of-type(1)
.midLeftIn h1:nth-of-type(2)