Mat*_*son 344 css css-selectors pseudo-element
我有一个元素列表,其样式如下:
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
}
li:not(:last-child):after {
content:' |';
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five
任何人都知道如何选择CSS除了最后一个元素？
您可以在此处查看:not()选择器的定义
imm*_*mma 412
如果not选择器出现问题,您可以设置所有选项并覆盖最后一个选择器
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
或者如果你以前可以使用,不需要最后一个孩子
li+li:before
{
content: '| ';
}
Viv*_*vek 225
每件事似乎都是正确的 您可能希望使用以下css选择器而不是您使用的css选择器.
ul > li:not(:last-child):after
Lor*_*ita 19
使用CSS的示例
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
Ash*_*sim 16
对我来说很好
&:not(:last-child){
text-transform: uppercase;
}
小智 10
您的示例在我的IE中不起作用,您必须在文档中指定Doctype标头,以便在IE中以标准方式呈现您的页面以使用内容CSS属性:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</html>
第二种方法是使用CSS 3选择器
li:not(:last-of-type):after
{
content: " |";
}
但您仍需要指定Doctype
第三种方法是使用JQuery和一些脚本如下:
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("li:not(:last)").append(" | ");
});
</script>
第三种方式的优点是你不必指定doctype和jQuery将兼顾兼容性.