CSS-стиль списка

Question

Я использую YUI reset / base, после сброса он устанавливает теги ul и li в стиль списка: диск снаружи;

Моя разметка выглядит так:

<div id="nav">
     <ul class="links">
         <li><a href="">Testing</a></li>
     </ul>

</div>

Мой код CSS:

#nav {}
#nav ul li {
    list-style: none;
 }

Теперь этот маленький диск рядом с каждым ли исчезает.

Почему это не работает?

 #nav {}
 #nav ul.links 
 {
      list-style: none;
 }

Это работает, если я удалю ссылку на файл base.css, почему?.

Обновлено: sidenav -> nav

Answer 1

Я думаю, что Дэн был близок со своим ответом, но это не проблема специфики. Вы можете установить стиль списка в списке (UL), но вы также можете переопределить этот стиль списка для отдельных элементов списка (LI).

Вы говорите браузеру не использовать маркеры в списке, но YUI говорит браузеру использовать их для отдельных элементов списка (выигрывает YUI):

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links {
    list-style: none; /* doesn't override styles for LIs, just the UL */
}

Вы хотите, чтобы браузер не использовал их в элементах списка:

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links li {
    list-style: none;
}

Answer 2

Последний пример, вероятно, не работает из-за специфичности CSS . (Более серьезное объяснение можно найти здесь .) То есть правило base.css в YUI:

ul li{ list-style: disc outside; }

Это более «специфично», чем ваше, поэтому используется правило YUI. Как уже отмечалось несколько раз, вы можете сделать свое правило более конкретным, настроив теги li:

#nav ul li{ list-style: none; }

Трудно сказать наверняка, не глядя на ваш код, но если вы не знаете о специфике, это, безусловно, стоит прочитать.

Answer 3

В первом фрагменте вы применяете стиль списка к элементу li, во втором - к элементу ul.

Попробуйте

#nav ul.links li
{
  list-style: none;
}

Answer 4

не должно быть:

#nav ul.links

Answer 5

Используйте это:

.nav ul li {
    list-style: none;
}

или

.links li {
    list-style: none;
}

должно работать ...

Answer 6

Может быть, стиль - base.css переопределяет ваши стили с помощью! Вы пытались добавить класс в этот конкретный ли и создать для него собственный стиль?