CSS во вложенном списке: избегайте стилизации обоих списков - PullRequest
Новая
       26

CSS во вложенном списке: избегайте стилизации обоих списков

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

У меня есть следующая структура вложенного списка:

HTML: 

<div id="my_nested_list">
    <ul>
        <li>
            Item label
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        <li>
        <li>...</li>      
   </ul>
</div>

CSS: 

#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}

Моя проблема в том, что при использовании селектора пробела вместо > правила первого уровня применяются на втором уровне. Но мне нужна поддержка ie6, которая не поддерживает >. Таким образом, я должен использовать пробел.

Пока у меня есть 2 решения:

  1. ставить классы на каждый ul и li и использовать #my_nested_list ul.firstlevel li.firstlevel
  2. используйте #my_nested_list ul li и #my_nested_list ul li ul li для перезаписи каждого нежелательного правила первого уровня.

У вас есть идеи получше?

Ответы [ 2 ]

3 голосов
/ 01 августа 2011

Правильное упорядочение CSS - ключевое слово.

http://jsfiddle.net/wHztz/

CSS: 

ul { background: red; }
ul ul { background: green }

ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }

HTML такой же, как в вашем вопросе, минус div.

Редактировать: Черт, я всегда заканчиваю тем, что осознаю вещи после того, как отправил свой ответ .. Похоже, у тебя была эта идея.

О внесении классов в список. Вам нужно только поставить классы на ул (Не важно .. это зависит)

Edit2: Если вы настаиваете на использовании классов для каждого элемента, но не хотите добавлять их вручную, вы можете сделать что-то вроде этого: http://jsfiddle.net/wHztz/5/

Это дает каждому ul класс в последовательности: ulist1, ulist2, ulist3 ... в зависимости от того, сколько у вас, конечно, uls.

Edit3: немного изменил код.

http://jsfiddle.net/wHztz/6/ - обратите внимание, что я ничего не изменил в CSS, поэтому CSS ничего не делает в этом примере.

JQuery: 

   $("#my_nested_list > ul, ul ul").each(function (i) {
        i = i+1;
        $(this).addClass("list"+i).children().addClass("list"+i);
   });

Создает: 

<div id="my_nested_list">
    <ul class="list1">
        <li class="list1">
            Item label
            <ul class="list2">
                <li class="list2">Subitem 1</li>
                <li class="list2">Subitem 2</li>
                <li class="list2">Subitem 3</li>
            </ul>
        </li><li class="list1">
        </li><li class="list1">...</li>      
   </ul>          
</div>

Вы можете легко настроить таргетинг на это как: 

ul.list1 {}
li.list1 {}

ul.list2 {}
li.list2 {}

Обратите внимание, что вы можете изменить эту часть: 

$(this).addClass("list"+i).children().addClass("list"+i);

в 

$(this).addClass("ul"+i).children().addClass("li"+i);

и это приведет к этому. 

<div id="my_nested_list">
    <ul class="ul1">
        <li class="li1">
            Item label
            <ul class="ul2">
                <li class="li2">Subitem 1</li>
                <li class="li2">Subitem 2</li>
                <li class="li2">Subitem 3</li>
            </ul>
        </li><li class="li1">
        </li><li class="li1">...</li>      
   </ul>          
</div>
2 голосов
/ 01 августа 2011

Ваша проблема не в селекторе >, а в необходимости поддержки IE6.

Мой первый совет - попытаться свести к минимуму ваше требование поддерживать этот древний браузер - даже если вы не можете полностью отказаться от поддержки, примите тот факт, что он не поддерживает некоторые вещи, которые вы хотите использовать, и что он в результате буду выглядеть плохо. Если он по-прежнему можно использовать в IE6, значит, вы выполнили свою работу, независимо от того, насколько она плоха.

Этот совет, вероятно, не поможет в этом конкретном случае, потому что, если вы разрабатываете вложенные списки, это, вероятно, означает структуру меню, которая действительно должна быть по-разному стилизована между двумя уровнями. Но в целом, не слишком переживайте за IE6; это не стоит хлопот.

Если вам действительно нужно, чтобы какой-то новый CSS-селектор работал в IE6, я бы порекомендовал пойти по пути Javascript. Существует несколько хороших библиотек, нацеленных на более старые версии IE, и поддерживающих различные функции, включая селекторы CSS.

На ум приходят два:

  • Во-первых, почтенный IE7.js Дина Эдвардса (и последующие сценарии, IE8.js и IE9.js). Этот скрипт существует уже много лет и добавляет множество функций и исправлений ошибок в различные версии IE, но в первую очередь IE6.

  • Во-вторых, вы можете попробовать Selectivizr . Это гораздо более новый скрипт, который фокусируется на добавлении отсутствующих селекторов CSS в различные версии IE. Selectivzr работает в сочетании с другой библиотекой (может использовать любую из нескольких), поэтому, если вы уже используете библиотеку, такую ​​как JQuery или MooTools, это может быть хорошим выбором.

Оба приведенных выше варианта заставят IE6 распознавать ваш > CSS-селектор (среди прочих), и, следовательно, ваши таблицы стилей будут работать в IE6 без необходимости их перезаписи.

Очевидно, что оба эти решения используют Javascript для работы, поэтому, если ваша пользовательская база IE6 имеет привычку отключать свой Javascript, то они в конечном итоге получат неработающий сайт. Вам решать, насколько это серьезная проблема и на скольких людей она повлияет.

Надеюсь, это поможет.

...