css - 仅使用 css 更改元素中的文本

Question

您好，我想知道是否可以将列表中第 6 个子 li 的文本更改为一些自定义文本。它用于存档小部件的博客。我希望第 6 个月只说“更远的地方”之类的话。我知道如何选择第 6 个 child ，但我不知道将文本更改为始终说“再往前”的最佳方法。

如有任何帮助，我们将不胜感激。

Answer 1

您可能会使用:

li:nth-child(6) {
    /* to hide the original text */
    color: transparent;
}

li:nth-child(6)::before {
    content: 'Further back';
    color: #000;
}

JS Fiddle demo .

但是 CSS 不能改变实际的文本；它可以显示此文本(但它不会出现在 DOM 中，也不会被 JavaScript 访问，也不会供用户选择/交互)。

如果将原文包裹在自己的节点中，比如一个span，如:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li><span>Six</span></li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

然后可以使用以下内容隐藏:

li:nth-child(6) span {
    display: none;
}

li:nth-child(6)::before {
    content: 'Further back';
    color: #000;
}

JS Fiddle demo .

如评论中所述，我应该解释双冒号 :: 的用法，而不是单冒号 : 前缀。在 CSS 中，这两者用于区分伪元素(::before、::first-line、::first-letter)和伪类 :first-child、:hover 等)。在 Internet Explorer 下，它在版本 8 中才开始理解/实现伪元素，仅 支持使用单冒号选择器(而大多数其他更现代的浏览器都支持这两个版本)，所以通常最好硬着头皮使用::before/:after(等)，或同时使用:::之前, :before {/* css */>.

引用资料:

• > CSS pseudo-classes .
• > CSS pseudo-elements .