CSS классы перекрываются? - PullRequest
Новая
       5

CSS классы перекрываются?

2 голосов
/ 05 июня 2011

это основы, которые я знаю, но я не могу решить это. это код (фрагмент) 

    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> (независимо от класса li) внутри <ul class="sub_folder"> имеют тот же стиль, что и <li class="dir"> внутри <ul id="storage_list"> ... все они получают класс .dir. Почему?

РЕДАКТИРОВАТЬ: Я сделал это! Есть ли способ проголосовать или наградить себя? Уже третий раз я решаю свои проблемы, когда никто не отвечает :) Шучу. Для духа сообщества проблема заключалась в том, что поскольку класс .sub_folder был внутри родительского #storage_list и было установлено правило для подчиненного элемента <li>, все <li> (независимо от того, находится ли внутри другого) получали одинаковые стили также. Решением было использование >, чтобы ТОЛЬКО родитель <li> получал определенный класс, а не детей, внуков и т. Д. Таким образом, правило (пример) становится ul#storage_list > li.dir > span.name

1 Ответ

0 голосов
/ 04 августа 2011

Попробуйте это: 

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