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/