CSS：not(：最后一个子级)：在选择器之后

vc9ivgsu 于 2023-04-01 发布在其他

关注(0)|答案(8)|浏览(139)

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

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>

css

来源：https://stackoverflow.com/questions/5449872/css-notlast-childafter-selector

8条答案

按热度按时间

z9gpfhce1#

如果是not选择器的问题，你可以设置所有的，覆盖最后一个

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

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

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

赞(0）回复(0）举报 2023-04-01

wrrgggsh2#

每件事看起来都是正确的。你可能想用下面的css选择器来代替你用过的。

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

赞(0）回复(0）举报 2023-04-01

iyzzxitl3#

对我来说，它工作得很好

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

赞(0）回复(0）举报 2023-04-01

hfwmuf9z4#

你写的例子在Chrome 11上运行得很好。也许你的浏览器只是不支持:not()选择器？
您可能需要使用JavaScript或类似的工具来完成此跨浏览器操作。jQuery在其选择器API中实现了:not()。

赞(0）回复(0）举报 2023-04-01

1tuwyuhd5#

使用CSS的示例

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

赞(0）回复(0）举报 2023-04-01

igsr9ssn6#

你的示例在IE中对我来说不起作用，你必须在文档中指定Doctype header，才能在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>

第二种方法是使用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将负责兼容性。

赞(0）回复(0）举报 2023-04-01

ccrfmcuu7#

移除：在last-child之前和：之后和使用

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

希望能成功

赞(0）回复(0）举报 2023-04-01

w51jfk4q8#

移除：在last-child之前和：之后和使用

ul > li:not(:last-child):after {
   border-bottom: none !important;
}

赞(0）回复(0）举报 2023-04-01

我来回答

CSS：not(：最后一个子级)：在选择器之后

8条答案

相关问题

热门标签

最新问答