html - li 的最后一个元素总是在内容之后变为特定的
问题描述
我制作了一个包含特定内容的列表,在这个带有 css 的列表中我放了一个+
when 是第一个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>
解决方案
:last-child
寻找任何元素。您可能希望使用:last-of-type
which 将应用于<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>
推荐阅读
- javascript - 函数在输出上复制数组
- node.js - 动态更新猫鼬中的密钥
- python - ModuleNotFoundError:在 macos 上使用 pyenv 构建 python 时没有名为“_lzma”的模块
- r - 在 dplyr::mutate 中传递一个字符串作为变量名
- python - 这些中断语句很奇怪吗?
- excel - 有没有办法为一个文件禁用 Excel 的“在表中包含新行和列”?
- python - 无法安装 pip 包
- java - Android studio - 谷歌广告崩溃应用
- time-complexity - 二分搜索算法时间复杂度
- parse-platform - Parse Dashboard 显示一些旋转的彩色点,然后变为空白