Question

我的代码出了什么问题？我希望在我的最后一个p元素上添加红色背景，这个元素有＃34; test＆＃34;这个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>

Answer 1

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

Answer 2

如果最后一段不应该有'test'类（如代码所示），那么对你的css做一点改动：

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

示例：http://jsfiddle.net/23nkw1z6/

否则，保持原样，只需将'test'类添加到最后一段......

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

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

2 个答案: