CSS：最后一个选择器被最后一个子[重复]忽略

Question

HTML：

<body>
      <h1>First heading</h1>
      <h1>Second heading</h1>
</body>

CSS：

h1:last-child{
   color: blue;}

所以问题是，尽管最后一个h1（第二个标题）是其父代（正文）的最后一个子代，却没有被设置样式。 [a]和其他标签也会发生此问题，但与“ p”可以很好地工作。

Answer 1

问题是，在您的HTML或IDE中，第二个h1不是最后一个孩子。

这是jsFiddle中的外观：

body元素有四个子元素，最后一个子元素是script元素。

因此，要使其正常工作，您必须删除所有其他元素，或者在这种情况下，从最后一个子元素中选择第三个。 jsFiddle demo

Answer 2

[尝试将H1标记括在div中]

 h1:last-child{
          color:blue;
        }

     <body>
      <div>
          <h1>First heading</h1>
          <h1>Second heading</h1>
      </div>
    </body>