CSS类重叠？答案

【问题标题】：CSS classes overlapping?CSS类重叠？
【发布时间】：2011-09-08 20:45:44
【问题描述】：

这是我所知道的基础知识，但我似乎无法解决这个问题。这是代码（sn-p）

    ul#storage_list, ul.sub_folder{
        margin:0;
        padding:0;
        list-style:none;
        font-size: 12px;

    }

            ul#storage_list li{
                margin:0;
                line-height: 20px;
                display:block;
                cursor:pointer;
            }

                ul#storage_list li.file span.name{
                    background:url("/larea/site_images/file.png") left no-repeat;
                    padding-left: 20px;
                }

                ul#storage_list li.dir span.name{
                    margin-left:5px;
                    background:url("/larea/site_images/folder.png") left no-repeat;
                    padding-left: 20px;
                }

                    ul#storage_list li.dir span.pin{
                    background:url("/larea/site_images/folder_arrow.png") left no-repeat #fff;
                    width:10px;
                    height: 10px;
                    display: inline-block;
                    }

ul.sub_folder{
    margin-left:15px;
    padding:0;
    list-style:none;
    font-size: 12px;

}               

            ul.sub_folder li{
                margin:0;
                line-height: 20px;
                display:block;
                cursor:pointer;
            }

                ul.sub_folder li.file span.name{
                    background:url("/larea/site_images/file.png") left no-repeat;
                    padding-left: 20px;
                }

                ul.sub_folder li.dir span.name{
                    margin-left:5px;
                    background:url("/larea/site_images/folder.png") left no-repeat;
                    padding-left: 20px;
                }
                    ul.sub_folder li.dir span.pin{
                    background:url("/larea/site_images/folder_arrow.png") left no-repeat;
                    width:10px;
                    height: 10px;
                    display: inline-block;
                    }   

    </style>

    </head>
        <body> 
            <ul id="storage_list">
                <li class="dir"><span class="pin"></span><span class="name">omg</span>
                    <ul class="sub_folder">
                        <li class="dir"><span class="pin"></span><span class="name">omg</span></li>
                        <li class="file"><span class="pin"></span><span class="name">omg2</span></li>
                    </ul>
                </li>
                <li class="file"><span class="pin"></span><span class="name">omg2</span></li>
            </ul>

碰巧<ul class="sub_folder"> 内的所有<li>（无论li 的类）都与<ul id="storage_list"> 内的<li class="dir"> 具有相同的样式......他们都得到.dir 类。为什么？

编辑：我做到了！有没有办法投票或奖励自己？这是我第三次在没有人回答的情况下解决自己的问题 :) 开玩笑。对于社区精神，问题在于，由于 .sub_folder 类在父类 #storage_list 内，并且设置了子类 <li> 的规则，所有 <li> （无论是否在另一个内）都获得相同的样式还。解决方案是使用>，这样只有父母<li>才能获得特定的班级，而不是孩子、孙子等。所以规则（示例）变为ul#storage_list > li.dir > span.name

【问题讨论】：

您是否验证了您的 html 以检查任何嵌套问题？可以发一下吗？
您可以在下面发布您自己的问题的答案 - 指向下方 - 如果人们喜欢它，它会得到支持 :)
但是顺便说一句，CSS 选择器效率低下。你应该深入研究它。 google.com/search?q=efficient+css+selectors
你的意思是重复的规则？我正在处理它，除此之外具体是什么？
@Sandro - 如果您已经解决了自己的问题，您可以将解决方案写为下面的答案，然后单击“接受”勾选按钮将其标记为正确答案。正如您所要求的，这将是您“奖励自己”的方式，同时也告诉我们其他人问题已经解决，所以我们不需要来帮忙。 :)

标签： css class overlapping

【解决方案1】：

试试这个：

ul#storage_list > li.dir > span.name
{
    margin-left:5px;
    background:url("/larea/site_images/folder.png") left no-repeat;
    padding-left: 20px;
}

【讨论】：