Html CSS：最后一个子选择器被最后一个子选择器忽略_Html_Css_Css Selectors

Html CSS：最后一个子选择器被最后一个子选择器忽略

html css

Html CSS：最后一个子选择器被最后一个子选择器忽略,html,css,css-selectors,Html,Css,Css Selectors,HTML: 因此，问题是最后一个h1（第二个标题）没有被设置样式，尽管它是其父项（主体）的最后一个子项。“a”和其他标记也会出现此问题，但“p”的效果很好。问题是，在HTML或IDE中，第二个h1不是最后一个子项以下是它在JSFIDLE中的外观： body元素有四个子元素，最后一个子元素是script元素因此，要使其工作，您必须删除所有其他元素，或者在本例中，从最后一个子元素中选择第三个元素尝试将您的H1标记包含在div h1：最后一个孩子{ 颜色：蓝色； } 第一标题第二标题您

HTML:

因此，问题是最后一个h1（第二个标题）没有被设置样式，尽管它是其父项（主体）的最后一个子项。“a”和其他标记也会出现此问题，但“p”的效果很好。

问题是，在HTML或IDE中，第二个

h1

不是最后一个子项

以下是它在JSFIDLE中的外观：

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

因此，要使其工作，您必须删除所有其他元素，或者在本例中，从最后一个子元素中选择第三个元素

尝试将您的

H1

标记包含在

div

h1：最后一个孩子{
颜色：蓝色；
}


第一标题
第二标题

您是在本地测试代码还是使用codepen之类的在线工具？：last child是一个伪类，如果目标元素是其他元素的最后一个子元素，它将选择目标元素。也就是说，：last child仅当元素是其父元素的最后一个子元素时才与该元素匹配。因此，在您的示例中，h1必须是中的最后一个孩子

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

h1:last-child{
   color: blue;}