h1 - 选择第二个不起作用

Question

我在选择第二个h1时遇到了一些麻烦.如果我尝试选择第一个,它会很好,但第二个不起作用.你能看看吗？

.sidemal h1:nth-child(2) {
    margin-top: 0px;    
}

我试过使用!重要,但没有用.

有任何想法吗？

链接到网站:http://tinyurl.com/pk9me6e

<section>
    <div class="col-md-12">
        <h1 class="page_title">Header 1</h1>
    </div>
</section>

<div class="col-md-12">
    ...
    <h1>Header 2</h1>
    ...
</div>

Answer 1

除非您的标记是字面上的:

<... class="sidemal">
    <h1>Heading 1</h1>
    <h1>Heading 2</h1>
    ...
</...>

......中间没有元素,你的第二个h1元素不会是第二个孩子.如果要选择第二个h1元素,可以改为使用:nth-of-type选择器:

.sidemal h1:nth-of-type(2) { ... }

更新

查看您的页面后,无需使用任何形式的:nth-选择器.你的第二个h1元素包含在一个article元素中,而你的第一个元素却没有.因此,我们可以使用:

.sidemal article h1 { ... }

演示

.sidemal article h1 {
  color: red;
}

<div class="sidemal">
  <h1>First <code>h1</code> element</h1>
  
  <article>
    <h1>Second <code>h1</code> element</h1>
  </article>
</div>