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