Question

我正在尝试在我的style.css文件中选择一系列wordpress帖子（具有相同类）的last-child。这是我的文档结构的简化版本：

<div id="container">
    <div id="content">
  <!--start .post-->
  <div id="post-33" class="hentry p1 post">
            <h2 class="entry-title"><a href="url">Post 1</a></h2>
            <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
        </div>
  <!--end  .post -->
  <!--start .post-->
  <div id="post-24" class="hentry p1 post">
    <h2 class="entry-title"><a href="url">Post 2</a></h2>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <!--end  .post -->
  <!--start .post-->
  <div id="post-24" class="hentry p1 post">
    <h2 class="entry-title"><a href="url">Post 3</a></h2>
    <div class="entry-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <!--end  .post -->

        <div id="nav-below" class="navigation">
            <div class="nav-previous"></div>
            <div class="nav-next"></div>
        </div>
    </div><!-- #content -->
</div><!-- #container -->

我试过这个，虽然它适用于：first-child选择器，但它对于last-child完全不起作用。

.post .entry-content { 
    background-color: pink; 
    border-bottom: 2px solid;
}

.post:first-child .entry-content { 
    background-color: red; 
    border-bottom: 0px solid;
}

.post:last-child .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid;
}

有什么想法？以下是我的网站的实时版本：http://dev.visualvisual.com/

Answer 1

使用nth-of-type和nth-last-of-type。

.post:nth-of-type(1) .entry-content { 
    background-color: red; 
    border-bottom: 0px solid;
}

.post:nth-last-of-type(2) .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid;
}

顾名思义，

first-child和last-child对儿童进行操作，因此您希望使用#content:last-child来查找最后一个元素（不一定是{{ 1}}虽然）。

Codepen

最后一个孩子没有上课。最后的类型也不起作用

1 个答案: