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>

出于某些原因，谷歌浏览器显示.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;
}

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

1 个答案: