Question

您好我想知道是否可以将列表中第6个孩子li的文本更改为某些自定义文本。它用于存档小部件的博客。我希望第六个月能说出“更进一步”的话。我知道如何选择第6个孩子但是我不知道改变文本的最佳方式总是说“再往后”。

非常感谢任何帮助。谢谢。

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, :before {/* css */}。

参考文献：

CSS pseudo-classes。
CSS pseudo-elements。

Answer 2

如果你有一个坚实的背景色：

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

.text {
    color: white;
}

.text:before {
    content: "Another text";
    color: black;
}

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

2 个答案: