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;
}

演示

＆＃13;

＆＃13;

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

＆＃13;

ConfigurationManager

＆＃13;

＆＃13;

＆＃13;

Answer 2

要选择每秒H1，您可以使用

.sidemal H1 + H1 { 
    margin-top: 0px;  
}