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/