列表转表格行格式下,如何跳过第一个<li>添加前置翼形符号?
解决方案
没问题,咱们直接调整现有CSS就能实现你要的效果——把第一个<li>作为标题不显示翼形符号,从第二个<li>开始显示符号,同时保留第一个<li>无顶部阴影的设定:
.post-body ul { list-style-type: none; margin-left: 0px; padding-left: 0em; text-indent: -1em; /* 修正原代码笔误:text-indext → text-indent */ display: table; } .post-body ul li { display: table-row; } /* 关键改动:用:not(:first-child)排除第一个li,只给后续li添加翼形符号 */ .post-body ul li:not(:first-child)::before { content:"\261e"; color: #8d8d8d; text-align: right; padding-right: .6em; display: table-cell; } /* 此规则保持不变,仅给第二个及以后的li添加顶部阴影 */ .post-body ul li + li { -moz-box-shadow: 0 -1px 0 #8d8d8d; -webkit-box-shadow: 0 -1px 0 #8d8d8d; box-shadow: 0 -1px 0 #8d8d8d; }
改动说明:
- 修正了原代码的笔误:把
text-indext改成正确的text-indent,确保文本缩进逻辑正常生效。 - 核心调整:给伪元素选择器加上
li:not(:first-child),这个CSS选择器会直接排除第一个<li>元素,只有第二个及以后的<li>才会生成翼形符号(\261e)。 - 阴影规则无需改动:
li + li的作用是选中“紧跟在另一个<li>之后的<li>”,天然就跳过了第一个<li>,正好匹配你要的阴影效果。
内容的提问来源于stack exchange,提问作者user9526133
相关产品推荐
相关产品推荐

