CSS 类重叠？

发布于 2024-11-13 01:50:04 字数 3428 浏览 2 评论 0原文

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

    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>

（无论 li 的类）都得到与
- 的样式相同...它们都得到.dir 类。为什么？

编辑：我做到了！有没有办法给自己投票或奖励自己？这是我第三次解决自己的问题，却没有人回答:)开玩笑。出于社区精神，问题在于，由于类 .sub_folder 位于父 #storage_list 内部，并且子

的规则设置后，所有

（无论是否在另一个内）也获得相同的样式。解决方案是使用 >，这样只有父

才会获得特定的类，而不是子、孙等。因此规则（示例）变为 ul#storage_list > li.dir >跨度名称

原文

this is the basics I know, but I can't seem to solve this. this is the code (snippet)

    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>

it happens that ALL the <li> (whatever the class of the li) inside <ul class="sub_folder"> get the same style as <li class="dir"> inside <ul id="storage_list"> ... they all get the .dir class.
Why?

EDIT: I did it! Is there a way to vote or reward myself? It's the third time I solve my own problems when nobody answers :) Kidding.
For community spirit the problem was that since the class .sub_folder was inside the parent #storage_list and a rule for the the sub <li> was set, all the <li> (no matter if inside another ) were getting the same styles also. The solution was to use > so that ONLY the parent <li> will get the specific class and not the children, grandchildren etc..
So the rule (example) becomes ul#storage_list > li.dir > span.name

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

双马尾 2024-11-20 01:50:04

试试这个：

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

Try this:

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

回复收藏 0 原文

~没有更多了~