我有一个元素列表，它的样式是这样的:
ul { list-style-type:没有; text-align:中心; ｝ 李{ 显示:内联; ｝ 李:不(胎):{ 内容:“|”; ｝ < ul > <李>一个李< / > <李>两个李< / > <李> 3 < /李> <李>四个李< / > <李> 5李< / > < / ul >
输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five
有人知道CSS如何选择除最后一个元素以外的所有元素吗?
你可以在这里看到:not()选择器的定义
当前回答
删除last-child之前的:和used之后的:
ul > li:not(:last-child):after {
border-bottom: none !important;
}
其他回答
一切似乎都是正确的。您可能希望使用以下css选择器而不是您使用的。
ul > li:not(:last-child)::after
你可以试试这个，我知道这不是你想要的答案，但概念是一样的。
你正在为所有的子元素设置样式，然后从最后一个子元素中移除它。
代码片段
li
margin-right: 10px
&:last-child
margin-right: 0
图像
删除last-child之前的:和used之后的:
ul li:not(last-child){
content:' |';
}
希望它能起作用
你的示例在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>
第二种方法是使用css3选择器
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>
第三种方法的优点是你不需要指定文档类型，jQuery将负责兼容性。
删除last-child之前的:和used之后的:
ul > li:not(:last-child):after {
border-bottom: none !important;
}
