CSS :not(:last-child):after 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5449872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :not(:last-child):after selector
提问by Matt Clarkson
I have a list of elements, which are styled like this:
我有一个元素列表，其样式如下：
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>Outputs One | Two | Three | Four | Five |instead of One | Two | Three | Four | Five
输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five
Anyone know how to CSS select all but the last element?
任何人都知道如何通过 CSS 选择除最后一个元素之外的所有元素？
You can see the definition of the :not()selector here
你可以在这里看到:not()选择器的定义
回答by imma
If it's a problem with the not selector, you can set all of them and override the last one
如果不是选择器有问题，您可以设置所有它们并覆盖最后一个
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
or if you can use before, no need for last-child
或者如果您之前可以使用，则不需要最后一个孩子
li+li:before
{
content: '| ';
}
回答by Vivek
Every things seems correct. You might want to use the following css selector instead of what you used.
每件事似乎都是正确的。您可能希望使用以下 css 选择器而不是您使用的选择器。
ul > li:not(:last-child):after
回答by Liza Daly
Your example as written works perfectly in Chrome 11 for me. Perhaps your browser just doesn't support the :not()selector?
您编写的示例在 Chrome 11 中对我来说效果很好。也许您的浏览器不支持:not()选择器？
You may need to use JavaScript or similar to accomplish this cross-browser. jQuery implements :not()in its selector API.
您可能需要使用 JavaScript 或类似工具来完成此跨浏览器。jQuery在其选择器 API 中实现:not()。
回答by Ashad Nasim
For me it work fine
对我来说它工作正常
&:not(:last-child){
text-transform: uppercase;
}
回答by Lorena Pita
An example using CSS
一个使用 CSS 的例子
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
回答by Martin Kunc
Your sample does not work in IE for me, you have to specify Doctype headerin your document to render your page in standard way in IE to use the content CSS property:
您的示例在 IE 中对我不起作用，您必须在文档中指定Doctype 标头才能在 IE 中以标准方式呈现您的页面以使用 content 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>
Second way is to use CSS 3 selectors
第二种方法是使用 CSS 3 选择器
li:not(:last-of-type):after
{
content: " |";
}
But you still need to specify Doctype
但是你仍然需要指定Doctype
And third way is to use JQuery with some script like following:
第三种方法是将 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>
Advantage of third way is that you dont have to specify doctype and jQuery will take care of compatibility.
第三种方式的优点是您不必指定 doctype，jQuery 会处理兼容性问题。
回答by Jaylukmann
Remove the : before last-child and the :after and used
删除 : before last-child 和 :after 并使用
ul li:not(last-child){
content:' |';
}
Hopefully,it should work
希望它应该工作
回答by Yashu Mittal
You can try this, I know is not the answers you are looking for but the concept is the same.
你可以试试这个，我知道这不是你要找的答案，但概念是一样的。
Where you are setting the styles for all the children and then removing it from the last child.
您在哪里为所有孩子设置样式，然后从最后一个孩子中删除它。
Code Snippet
代码片段
li
margin-right: 10px
&:last-child
margin-right: 0
Image
图片
