CSS：not(：last-child)：选择器之后

CSS :not(:last-child):after selector

我有一个元素列表，其样式如下：

1
2
3
4
5
6
7
8
9
10
11
12

ul {
list-style-type: none;
text-align: center;
}

li {
display: inline;
}

li:not(:last-child):after {
content:' |';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<ul>

<li>
One
</li>

<li>
Two
</li>

<li>
Three
</li>

<li>
Four
</li>

<li>
Five
</li>

</ul>

任何人都知道如何CSS选择除最后一个元素以外的所有元素？

您可以在此处查看:not()选择器的定义

相关讨论

如果不是选择器有问题，则可以设置所有选择器并覆盖最后一个选择器

1
2
3
4
5
6
7
8

li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}

或者如果您可以使用之前，则不需要最后一个孩子

1
2
3
4

li+li:before
{
content: '| ';
}

相关讨论

一切似乎都是正确的。您可能要使用以下css选择器代替您使用的选择器。

1	ul > li:not(:last-child):after

相关讨论

您撰写的示例对我来说在Chrome 11中非常适用。也许您的浏览器不支持:not()选择器？

您可能需要使用JavaScript或类似工具才能完成此跨浏览器。 jQuery在其选择器API中实现：not()。

相关讨论

使用CSS的示例

1
2
3

ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}

对我来说很好

1
2
3

&:not(:last-child){
text-transform: uppercase;
}

相关讨论

对于我来说，您的示例无法在IE中运行，您必须在文档中指定Doctype标头，才能在IE中以标准方式呈现页面以使用内容CSS属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!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选择器

1
2
3
4

li:not(:last-of-type):after
{
content: " |";
}

但是您仍然需要指定Doctype

第三种方法是将JQuery与以下脚本结合使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

第三种方法的优点是您不必指定doctype，而jQuery将负责兼容性。

相关讨论

删除最后一个孩子之前的：和之后的：after

1
2
3

ul li:not(last-child){
content:' |';
}

希望它应该能工作

您可以尝试一下，我知道不是您要找的答案，但是概念是相同的。

您在哪里为所有子项设置样式，然后从最后一个子项中删除样式。

代码段

1
2
3
4
5

li
margin-right: 10px

&:last-child
margin-right: 0

图片

enter image description here

相关讨论