为什么父母的列表样式图像会覆盖孩子的图像？

Question

这是我的HTML:

<ul id="todoList" class="workList">
    <li>
         <h2 class="collapse"> Release 1</h2> 
        <ul>
            <ul> <strong> Core Additions </strong>
                <li class="workDone">Done -- should be checked off</li>
                <li class="workDone">Done</li>
                <li>Not Done</li>
                <li>Not Done</li>
            </ul>
        </ul>
    </li>
</ul>

这是冲突代码：

.workDone {
    color: #A0A0A0;
    font-weight: lighter;
    list-style: none;
    list-style-image: url("..//images/checkMark.png");
    margin-left: 20px;
}
.workList > li > ul li {
    margin-left: 32px;
    margin-top: 5px;
    margin-bottom: 5px;
    list-style-image: url("..//images/checkBox.png");
}

workDone是孩子——我把它放在前面，看看它声明的位置是否有问题。

.workList是未排序列表，.workDone是<li>

出于某种原因，谷歌chrome显示.workDone的checkMark.png被划掉，然后它继承了它的父图像。。。

jsFiddle

为什么会发生这种情况
是否有变通办法/解决方案？

Answer 1

.workList > li > ul  li

是比更具体的CSS选择器

.workDone

如果我理解正确，你正在寻找这个：

.workList > li > ul  li.workDone
{
    color: #A0A0A0 ;
    font-weight: lighter;
    list-style: none;
    list-style-image: url("..//images/checkMark.png") ;
    margin-left: 20px;
}