li的最后一个元素总是在内容后更改为特定的

时间:2018-11-30 19:08:26

标签: html css listitem

我制作了一个包含特定内容的列表,在此列表中,我使用CSS将+放在第一个li或中间元素的位置,但是如果最后一个则用{{ 1}}。

我认为: = 我得到:1 + 2 + 3 = Result

我的代码:

1 + 2 + 3 + Result
.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 270px;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-child)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-child::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}

2 个答案:

答案 0 :(得分:2)

:last-child查找 any 元素。您可能想使用:last-of-type,它将应用于示例中的最后一个<li>元素:

.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 4em;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-of-type)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-of-type::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}
<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
  <div>
    Result
  </div>
</ul>

答案 1 :(得分:1)

您的示例未按预期工作,因为您误解了:last-child的工作方式。更改最后一个li.itemsLook元素无效,它仅在该元素是ul的最后一个子元素时才在该元素上起作用(在这种情况下,因为您有一个div作为最后一个子元素,所以不起作用)。{{3} }

一种解决方法是像这样将div移出ul

<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
</ul>
<div>
  Result
</div>

,然后将ul, div { display: inline}添加到CSS。