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

Question

我做了一个包含特定内容的列表，在这个列表中 css 我放了一个 + 当是第一个 li 或中间元素但如果是最后一个我在 css.

中用 = 更改内容

我看到了这个： 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%;
    
}

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

Answer 1

您的示例没有按预期工作，因为您误解了 :last-child 的工作原理。更改最后一个 li.itemsLook 元素不起作用，它仅在该元素是 ul 的最后一个 child 时才起作用（在这种情况下不是因为你有一个 div作为最后一个child。https://www.w3schools.com/cssref/sel_last-child.asp

解决这个问题的一种方法可能是像这样将 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。

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

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

Last element of li always change to specific after content

html

css

listitem