Как изменить стиль CSS для вложенных элементов списка?

Question

У меня есть стиль для стилизации элементов <a> в элементах списка в контейнере #navigation. Это работает нормально.

#navigation li a {
  text-decoration:none;
  background:#bfe5ff;
  color:#045e9f;
  width:125px;
  height:35px;
  padding-top:11px;
  display:block;
  float:left;
  margin-left:2px;
  text-align:center;
  font-size:18px;
  font-weight:bold;
}

Теперь через несколько <li> с я вставляю <div> с. В них я снова использую список, но он должен отличаться по стилю или не иметь стиля.

Когда я вставляю <li> s, их стиль совпадает с внешними <li> элементами, но не должен.

Я пытаюсь использовать это:

#newnavigation li a { 
  font-size:12px;
  margin-left:20px;
}

но он не работает - он применяет "внешние" стили.

Это моя разметка:

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <li><a href="#"></a></li>
    </div>
  </li>
</ul>

Answer 1

Он будет продолжать применять внешние стили - это «C» в CSS, каскадное. Ваши новые стили подобраны правильно, но если я правильно читаю вопрос, вы пытаетесь устранить другие «унаследованные» стили, такие как цвет фона?

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

Answer 2

Ваш css нацелен на новую навигацию #id, но ваш ul #id - навигация Попробуйте следующее:

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <ul id="newnavigation">
          <li><a href="#">First category</a></li>
      </ul>
    </div>
  </li>
</ul>

Answer 3

Обратите внимание, что ваша разметка недействительна. Чтобы вставить новые элементы, вы также должны вставить новые списки, т.е.

<ul id="newnavigation>
  <li>
    <div>
      <ul>
        <li></li>
      </ul>
    </div>
  </li>
</ul>

Всегда полезно проверить вашу разметку , когда у вас есть проблемы с вашим стилем, Javascript и т. Д.

Сказав, что для соответствия только внутренним LI, вам нужно правило CSS:

#newnavigation li ul li{
  // stuff here
}

Answer 4

Чтобы выбрать внутренние элементы, просто вложите их:

/** Matches outer *AND* inner LIs */
#navigation li {
}

/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}

Или, чтобы соответствовать якорям:

#navigation li a {}
#navigation li li a {}

Во внутренних стилях вы начнете с набора стилей, унаследованного от внешних стилей, поэтому вы можете захотеть «отменить» некоторые настройки, переопределив их в соответствии с вашими потребностями.

Answer 5

Вы также можете использовать дочерний селектор, например: #navigation> li

Так что стилизован только внешний li.

Обратите внимание, что IE6 и ниже не поддерживает дочерние селекторы.

Answer 6

Полагаю, что-то вроде этого?

<ul id="navigation">
    <li><a href="#">link</a></li>
    <li><ul id="newnavigation"><li><a href="#">link</a></li></ul></li>
</ul>

Я копирую и вставляю ваши стили, и все работает нормально. Что именно не работает?

Обновление:

Мое предположение было не совсем правильным. В показанном вами коде отсутствует id = "newnavigation", который соответствует селектору #newnavigation css.