我想用CSS制作"语法正确"的列表.这是我到目前为止:
该<li>标签与在他们之后逗号水平显示.
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
这有效,但我希望"最后一个孩子"有一个句号而不是逗号.并且,如果可能的话,我也想把"和"放在"最后一个孩子"之前.我正在构造的列表是动态生成的,所以我不能只给"最后一个孩子"一个类.你不能组合伪元素,但这基本上是我想要实现的效果.
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
我该如何工作？
Zyp*_*rax 162
这工作:)(我希望多浏览器,Firefox喜欢它)
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>Gab*_*ocq 23
我喜欢这个<menu>元素中的列表项.考虑以下标记:
<menu>
<li><a href="/member/profile">Profile</a></li>
<li><a href="/member/options">Options</a></li>
<li><a href="/member/logout">Logout</a></li>
</menu>
我用以下CSS设置它的样式:
menu > li {
display: inline;
}
menu > li::after {
content: ' | ';
}
menu > li:last-child::after {
content: '';
}
这将显示:
Profile | Options | Logout
小智 15
尽管如此,有人可能从中获益:
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }
这应该适用于CSS3和[未经测试的] CSS2.
Der*_*rek 11
你可以组合伪元素!对不起,伙计们,我在发布问题后不久想出了这个问题.由于兼容性问题,可能不太常用.
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
这很有效.CSS有点神奇.
简而言之,在CSS 3中
:后
应该像这样使用
::后
来自https://developer.mozilla.org/de/docs/Web/CSS/::after :
为了在伪类和伪元素之间建立区分,在CSS 3中引入了:: after表示法.浏览器也接受表示法:在CSS 2中引入之后.
所以它应该是:
li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }