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

Question

我制作了一个包含特定内容的列表，在此列表中，我使用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%;
    
}

Answer 1

: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>

Answer 2

您的示例未按预期工作，因为您误解了：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。