-1

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

任何帮助将不胜感激，谢谢。

4

2 回答 2

4

您可能会使用：

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

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

JS 小提琴演示。

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

如果原始文本被包裹在自己的节点中，例如 a 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 小提琴演示。

正如评论中提到的，我应该解释双冒号的使用::，而不是单冒号:前缀。在 CSS 中，这两者用于区分伪元素（::before, ::first-line, ::first-letter）和伪类:first-child,:hover等）。在 Internet Explorer 下，在版本 8 中才开始理解/实现伪元素，仅支持使用单冒号选择器（而大多数其他更现代的浏览器都支持这两个版本），所以通常最好咬紧牙关并使用：:before/ :after（等），或同时使用：::before, :before {/* css */}.

参考：

于 2013-09-03T13:40:49.430 回答
0

如果您有纯色背景色：

http://jsfiddle.net/jonigiuro/A622U/

.text {
    color: white;
}

.text:before {
    content: "Another text";
    color: black;
}
于 2013-09-03T13:41:24.553 回答