Question

   .year-seperator:last-of-type{
    	display: none;
    }

    <ul class="blog-year">	
        <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
    </ul>

然后所有分隔符都消失了。为什么？我怎样才能获得该类的最后一个元素？或者我该如何隐藏它？

Answer 1

试试这个

.blog-year li:last-child .year-seperator {
    display: none;
}

<ul class="blog-year">  
    <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
</ul>

Answer 2

因为他们都是李的最后一个。它是最后一个li元素而不是最后一个span元素。它应该是这样的：

li:last-child .year-seperator {
    display: none;
}

Answer 3

<强>语法

element:last-child { style_properties }

阅读更多详情Click

  .blog-year li .year-seperator:last-child
      {
         display:none; 
      }

    <ul class="blog-year">	
        <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
    	<li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
    </ul>

如何获得CSS的最后一个元素？

3 个答案: