Question

这是我的HTML

<div id="funnel">
    <div class="funnel_column_cont">This is a first div.</div>
    <div class="funnel_column_cont">This is a second div.</div>
    <div class="funnel_column_cont">This is a third div.</div>
    <div class="funnel_column_cont">This is a fourth div.</div>
    <div class="funnel_column_cont">This is a fifth div.</div>
    <div class="clr"></div>
</div>

这是我的CSS

<style type="text/css">
#funnel .funnel_column_cont:last-of-type {
    background-color:red;
}
</style>

我想在类“ funnel_column_cont”的最后一个div中添加红色背景色。但是，如果HTML末尾包含<div class="clr"></div>，那么我的CSS将无法正常工作。

如果我删除此“ clr”类div，则:last-of-type将按预期工作。为什么？我不明白，因为我在CSS中提到了类.funnel_column_cont:last-of-type。如果我添加了其他HTML元素（例如标题或段落），则：last-of-type仍然有效。如何解决？

Answer 1

last-of-type伪选择器不能用于类钩子，而不能用于标签。您可以使用javascript，或者，如果您知道具有该特定类名称的确切数量的元素，则可以使用:nth-of-type(5)

对其进行挂钩

Answer 2

尝试使用:nth-child命令。

提琴：https://jsfiddle.net/3b147ke8/

.funnel_column_cont:nth-child(5) {
  background-color: red;
}

CSS选择器：last-of-type如果包含另一个div不起作用

2 个答案: