Question

我想使用CSS制作“语法正确”的列表。这就是我到目前为止所做的：

<li>标签水平显示，后面带逗号。

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

这有效，但我希望“最后一个孩子”有句号而不是逗号。并且，如果可能的话，我也想把“和”放在“最后一个孩子”之前。我正在构造的列表是动态生成的，所以我不能只给“最后一个孩子”一个类。你不能组合伪元素，但这基本上就是我想要实现的效果。

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

我如何使这项工作？

Answer 1

这有效:)（我希望多浏览器，Firefox喜欢它）

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

Answer 2

对于＆lt; menu＆gt;中的列表项，我喜欢这样元素。请考虑以下标记：

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

我使用以下CSS设置它：

menu > li {
  display: inline;
}

menu > li:after {
  content: ' | ';
}

menu > li:last-child:after {
  content: '';
}

这将显示：

Profile | Options | Logout

这是可能的，因为Martin Atkins在comment

上解释了这一点

Answer 3

旧线程，但有人可能从中受益：

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

这应该适用于CSS3和[未经测试的] CSS2。

Answer 4

你可以组合伪元素！对不起，伙计们，我在发布问题后不久想出了这个问题。由于兼容性问题，可能不太常用。

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

这很有效。 CSS太棒了。

Answer 5

简而言之，在CSS 3中

：后

应该像这样使用

::后

来自https://developer.mozilla.org/de/docs/Web/CSS/::after：

在CSS 3中引入:: after表示法以便建立一个伪类和伪元素之间的区别。浏览器也接受表示法：在CSS 2中引入。

所以它应该是：

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

Answer 6

为这个问题添加另一个答案，因为我确实需要@derek所要求的内容，而且在看到这里的答案之前我已经进一步了解了。具体来说，我需要能够也考虑具有两个列表项的情况的CSS，其中不需要逗号。举个例子，我希望制作的一些作者署名如下：

一位作者： By Adam Smith.

两位作者： By Adam Smith and Jane Doe.

三位作者： By Adam Smith, Jane Doe, and Frank Underwood.

这里已经给出的解决方案适用于一位作者和3位或更多位作者，但忽略了两位作者案例 - 其中＆＃34;牛津逗号＆＃34;风格（也称为＆＃34;哈佛逗号＆＃34;某些部分的风格）不适用 - 也就是说，在结合之前不应该有逗号。

经过一个下午的修补，我想出了以下内容：

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

它显示了我已经将它们放在上面的行列。

最后，我还必须摆脱li元素之间的任何空格，以避免烦恼：内联块属性否则会在每个逗号之前留下空格。这可能是另一个不错的黑客，但这不是这个问题的主题，所以我会留下让其他人回答。

在这里小提琴：http://jsfiddle.net/5REP2/

Answer 7

要获得类似一，二和三的内容，您应该再添加一个css样式

li:nth-last-child(2):after {
    content: ' ';
}

这会删除最后一个元素的逗号。

完整代码

＆＃13;

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

＆＃13;

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

＆＃13;

Answer 8

我在媒体查询中使用相同的技术，有效地将子弹列表转换为较小设备上的内联列表，因为它们节省了空间。

所以改变来自：

列出项目1
列出项目2
列出项目3

为：

清单第1项;清单第2项;清单项目3。

结合CSS Pseudo-elements，“：after”the：：last-child“

8 个答案: