Question

鉴于风格：

for

和对象：

ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

如何仅从

更改第二个对象的content属性

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-todo">One</li>
    <li class="progtrckr-todo">Two</li>
    <li class="progtrckr-todo">Three</li>
</ol>

到

content: "\039F";？

我试过了：

content: "\2716";

但它不起作用。

知道如何使这项工作？

Answer 1

content属性仅适用于伪元素（:before，:after）。您不能使用内联样式覆盖它，因为内联样式始终适用于它所在的元素，而伪元素不是您可以编辑的标记的一部分。

使用:nth-of-type或:nth-child伪选择器：

ol.progtrckr :nth-child(2):before {
    content: "\2716";
}

Answer 2

您可以使用nth-child覆盖属性

ol.progtrckr :nth-child(2):before {
    content: "\2716";
}

Answer 3

应该是这样的：

ol.progtrckr :nth-child(2):before {
 content: "\2716";
}

如果不完全符合您的要求，您可以对此提出质疑

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

content:''属性是伪元素:before的css属性，而不是li元素。

如果您想以编程方式更改content，最好只在li元素中添加一些类，并覆盖css中的li.yourClass:before{content:'...'}。

Answer 5

你的问题是你的css样式它适用于“：before”。所以你需要在元素之前插入内容。你可以使用nth-child W3C

或者只是将特定类添加到sec元素：

  secelementclass:before {
        content: "\2716";
    }

<ol class="progtrckr" data-progtrckr-steps="5">
<li class="progtrckr-todo">One</li>
<li class="progtrckr-todo secelementclass">Two</li>
<li class="progtrckr-todo">Three</li>

更改特定元素的CSS内容属性

5 个答案: