css 使用带有 div 类选择器的“last-child”css 元素答案

【问题标题】：css use "last-child" css element with div class selectorcss 使用带有 div 类选择器的“last-child”css 元素
【发布时间】：2014-11-10 23:47:05
【问题描述】：

我的代码有什么问题？我希望在我的最后一个具有“test”类的 p 元素上添加红色背景，并且这个 p 标签位于 div 块中。

<!DOCTYPE html>
<html>
<head>
<style> 
.test{
background: blue;
}
div .test:last-child{
    background: red;
}
</style>
</head>
<body>
<div>
<p class="test">The first paragraph.</p>
<p class="test">The second paragraph.</p>
<p class="test">The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<p>end line</div>
</body>
</html>

【问题讨论】：

last-child CSS 选择器获取最后一个子元素，无论其类如何。
CSS to match the last match of a selector? 的可能重复项

标签： css

【解决方案1】：

:last-child 将匹配作为父级子级的最后一个元素。 div 的最后一个孩子没有类测试，因此它不会匹配。

【讨论】：

【解决方案2】：

如果最后一段不应包含“test”类（如您的代码中所示），请对您的 css 进行如下小改动：

div .test{
background: blue;
}
/* div .test:last-child{ */
div p:last-child{
    background: red;
}

此处的示例：http://jsfiddle.net/23nkw1z6/

否则，保留所有内容，并将“测试”类也添加到最后一段...

示例：http://jsfiddle.net/gapqaeb7/ 希望有帮助！

【讨论】：