Question

我正在尝试将一些CSS应用到最后一个.topic-wrapper div（位于entry-content div内）：

<div class="entry-content">

 <div class="bbp-pagination">
 <h2 class="dark-title">Top Topics</h2>
 <div class="topic-wrapper">
 <h4></h4>
 <div class="topic-wrapper">
 <h4></h4>
 <div class="topic-wrapper"> <!-- I'm trying to get this one -->
 <h4></h4>
 <div class="mainbar">
 <div class="bbp-pagination">

使用此代码：.entry-content div:last-child

但似乎CSS正在应用于.topic-wrapper内的某些div。

像：

<div class="topic-wrapper">
<div class="topic-left">
<h2>
<span>
<span class="bbp-topic-started-in">
<div class="bbp-topic-tags"> <!-- this one -->
<p>

有任何解决此问题的建议吗？

</div>

Answer 1

除非我误读你的筑巢，否则你不能。 :last-child找到父母的最后一个孩子的元素，但是条目内容的最后一个孩子是bbp-pagination。

此外.entry-content div:last-child会找到.entry-content后代的所有div - 而不仅仅是直接子项。

您可能希望.entry-content>div:last-child仅查看直接后代。（即儿童，但不是孙子）

Answer 2

应该这样做，使用“＆gt;”让你成为直接的后代：

.entry-content > div:last-child

以下是一个例子：

<div class="container">
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="outer">
    </div>
    <div class="outer">
    </div>
     <div class="outer">
    </div>
</div>



.container
{
    width:300px;

    background-color:yellow;
}

.outer
{
    width:100px;
    height:100px;
    background-color:red;
    margin:20px;
}

.inner
{
    width:50px;
    height:50px;
    background-color:pink;
    margin:5px;
}



.container > div:last-child
{
    background-color:blue;
}

/* uncomment this statement to see the alternative broken version*/
/*
.container div:last-child
{
    background-color:green;
}

*/

您可以查看example on jsfiddle

使用last-of-type选择器获取最后一个div时出现问题

2 个答案: