Два разных ol li ul li на одной странице

[DedMoris]

Здравствуйте есть одна страница на которую нужно вывести 2 разных списка

пример:

<ol>
  <li>1
    <ul>
      <li>2</li></ul></li>
  <li>3</li>
</ol>

<ol>
  <li>1
    <ul>
      <li>2</li></ul></li>
  <li>3</li>
</ol>

css файл

ol { color:blue; } // этот цвет применяется для ol li + ol li ul li в обоих списках

Вопрос. Хочу чтобы во втором списке color для ol li + ol li ul li был red, т.е. в первой пусть будет blue а во второй red

На самом деле все намного сложнее. На сайте меню, такое выкидное (многоуровневое), а тут потребовалось сделать на странице многоуровневый список. Так проблема заключается в том что этот второй список полностью наследует все от первого

пробовал так

ol id='a'

в css

ol#a { color:blue; }

это вариант, но меняется только ol второго списка, а нужно же чтобы не ol менялся, а ol li + ol li ul li (второго списка)

т.е. получается что ol li (второго списка) не наследует ol (второго списка)

Короче запутался вообще.

Тут бы помогло чтото типа обнуления стиля для элемента ol второй таблицы, но увы (CSS одним словом)

Покажите как сделать 2 одинаковых по структуре списка, но разными стилями!

Заранее благодарен.

[DedMoris]

Для наглядности реальный код.

html

  <link rel='stylesheet' href='scripts/style1.css' type='text/css' />

<div id='main'>
  <div id='smenu'>
    <div id='menu'>
      <ul id='mmenu'>
        <li><a>Пункт 1</a>
          <ul><li><a>Пункт 1.1</a></li></ul></li>
        <li><a>Пункт 2</a>
          <ul><li><a>Пункт 2.1</a></li>
              <li><a>Пункт 2.2</a></li></ul></li></ul></div>
    <br class='clear' /></div>
  <div id='spage'>
    <div id='page'>

<div id='sm'>

<ol>
  <li>Пункт 1. ВСЕМ ПРИВЕТ ВСЕМ ПРИВЕТ
    <ul>
      <li>1.1</li>
      <li>1.2</li></ul></li>
  <li>2</li></ol>

</div>

      </div>
    <br class='clear' /></div></div>

css

* { border:0; margin:0; padding:0; }
.clear { clear:both; }

#main #smenu #menu #mmenu ul, li { width:95px; font-size:11px; line-height:22px; font-weight:bold; text-align:center; font-variant:small-caps; list-style:none; }
#main #smenu #menu #mmenu ul { position:absolute; display:none; }
#main #smenu #menu #mmenu ul li { float:none; }
#main #smenu #menu #mmenu li { position:relative; background:#171717; float:left; }
#main #smenu #menu #mmenu li ul li { background:#7F7F7F; }
#main #smenu #menu #mmenu a { color:#ffffff; text-decoration:none; display:block; }
#main #smenu #menu #mmenu li:hover ul { display:block; }
#main #smenu #menu #mmenu li:hover { background:#424242; }

#main #spage #page #sm ol li ul li { color:red; }

Проблемы первого списка не интересуют вообще. Там все нормально и все работает как нужно.

Интересует вопрос про второй список!

Из этого примера видно, что во втором списке ul, li = width:95px; Почему так? Откуда? Ведь стиль для первого списка находится тут - #main #smenu #menu #mmenu, а для второго тут - #main #spage #page #sm (если можно объясните как тут наследование происходит).

И последний вопрос - как для второго списка сдросить все стили.

[Kray Storm]

но меняется только ol второго списка, а нужно же чтобы не ol менялся, а ol li + ol li ul li (второго списка)

Если я правильно понял эти "многабукав", то нужно, чтобы весь список в <div id='spage'> был красным, но у тебя не получается "пробиться" к <li> второго списка?

Ну, в таком случае просто добавь строчку в css:

#main #spage #page #sm ol li {color:red;}
или просто
#sm {color:red;}

Из этого примера видно, что во втором списке ul, li = width:95px; Почему так? Откуда?

В <li> ширина берется отсюда:

#main #smenu #menu #mmenu ul, li { width:95px; ...}

Это никакое не наследование, ведь у тебя явно задано "...,li { width:95px; ...}"

И последний вопрос - как для второго списка сдросить все стили.

Примерно так:

#sm {перечисляешь все нужные свойства с дефолтными значениями;}

Покажите как сделать 2 одинаковых по структуре списка, но разными стилями!

Как бы странно это не звучало - нужно использовать два разных стиля.

html:

список1 class="list_1"

список2 class="list_2"

css:

.list_1{стиль1;}

.list_2{стиль2;}

Edited December 10, 2012 by Kray Storm

[DedMoris]

Я это все вижу так:

И того:

Edited December 10, 2012 by DedMoris

[DedMoris]

В моем понимании, если для #main (C:\) задать свойство чего-либо, то это свойство будет распространятся для всего, что в него вложено, т.е. #main p { color:red; } – говорит, что все P и в #main (C:\) и в #mmenu (C:\WINDOWS\TEMP\NeroLog) и в #sm (C:\Program Files\Movie Maker\Mui) будут красные.

Если же написать #menu p { color:blue; } – то P синего цвета будет только в #menu (C:\WINDOWS\TEMP) и #mmenu (C:\WINDOWS\TEMP\NeroLog), но не как в #page (C:\Program Files\Movie Maker)!

Т.е. если расшарить для сети папку C:\Program Files то пользователи будут видеть текущую папку и все вложенное в нее, т.е. C:\Program Files\*

Если в нашем примере #main #spage #page #sm ol li ul li (#sm - C:\Program Files\Movie Maker\Mui) идет наследование #main #smenu #menu #mmenu ul, li width:95px; (#mmenu - C:\WINDOWS\TEMP\NeroLog) а оно так и есть! Тогда я вообще не понимаю как работает CSS! Как можно взять файл из C:\Program Files\Movie Maker\Mui и применить его свойства C:\WINDOWS\TEMP\NeroLog ?

Получается так, что в CSS нет такого понятия как РОДИТЕЛЬ? Получается что нет ни какой вложенности и разницы между C:\Program Files\Movie Maker\Mui и C:\WINDOWS\TEMP\NeroLog тоже нет.

Тогда все это похоже на то, что все файлы с винчестера скинули в корень C:\ и ими можно пользоваться, находясь в любой директории! Получается так что нет разницы между расшариванием C:\ и C:\WINDOWS\TEMP\NeroLog. Какая разнича что расшариваешь, т.к. выдешь все что можешь.

В моем мозге это просто не укладывается! Я не могу понять, как я расшариваю папку C:\WINDOWS\TEMP а пользователи из сети могут видеть мой корень С (C:\).

Все то же самое и про стили мне не понятно как #sm (C:\Program Files\Movie Maker\Mui) может наследовать #mmenu (C:\WINDOWS\TEMP\NeroLog). Какая тут связь? Какая тут подчиненность?

Я могу понять только * { border:0; margin:0; padding:0; } – это правило в моем понимании говорит что все без исключения блоки и их элементя (вне зависимости от их вложенности) имеют это свойства, потому что это свойство нулевого уровня и относится ко всему (как глобальная переменная)!

#sm {перечисляешь все нужные свойства с дефолтными значениями;}

Это я так и понял, что лечить нужно всем этим. Но если это правда, то тупее чем CSS я еще ничего не видел!

В любой школе, колледже, техникуме, институте говорят одно и то же – 1) ЭЛЕМЕНТ НАСЛЕДУЕТ СВОЙСТВА РОДИТЕЛЯ 2) ЭЛЛЕМЕНТЫ ОДНОГО УРОВНЯ НЕ МОГУТ БЫТЬ РАВНЫМИ

Т.е. 1) Если расшарить C:\Windows то расшарка распространится на текушую папку и все что в нее вложено 2) Все свойства C:\WINDOWS не могут сравниваться с C:\Program Files

В CSS этого я так понимаю нет!

[Kray Storm]

В любой школе, колледже, техникуме, институте говорят одно и то же

Ого! Везет же. У нас в школе о таких вещах вообще не говорили )

Тогда я вообще не понимаю как работает CSS!

Все уже придумали до нас. Особенно, что касается всяких менюшек на списках. Чтобы не забивать голову ненужными аналогиями из файловой системы, просто почитай Самоучитель CSS от Контекстные селекторы до Каскадирование. На все это уйдет 58 минут времени с учетом кофе и бутеров. И все сразу станет на свои места.

Вот что-что, а в плане управления стилями через селекторы и их группирования, в CSS все очень даже просто и логично.

Если все-равно будет непонятно, посмотри примеры реализации многоуровневых меню. В Инете их полно.