html - css 样式内容属性

Question

我有一个有序列表，其中我在内容中使用了计数器。

问题:

如何仅将颜色更改为内容属性 ( NUMBERS )(例如 1.2、1.3 ... 更改为红色)？

注意:寻找仅 CSS(无 HTML 更改!)

HTML:

<ol>
        <li>Item
            <ol>
                <li>Item</li>
                <li>Item
                    <ol>
                        <li>Item</li>
                        <li>Item</li>
                        <li>Item</li>
                    </ol>
                </li>
                <li>Item</li>
            </ol>
        </li>
        <li>Item</li>
        <li>Item</li>
    </ol>

CSS:

ol {
    list-style-type: none;
    counter-reset: item;
}
ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item
}

想要的输出:

Answer 1

要对所有数字都这样做，只需将 color:red; 添加到您的 css 中即可

ol li:before {
    content: counters(item, ".")". ";
    counter-increment: item;
    color:red;
}

http://jsfiddle.net/ZSkLE/3/

要为较低级别执行此操作(这是您在编辑问题之前想要执行的操作)，您可以这样做..

ol li ol li:before {
    color:red;
}

并阻止下一层变红..

ol li ol li ol li:before {
    color:black;
}

http://jsfiddle.net/ZSkLE/1/