Как я предотвращаю наследование CSS?

У меня есть иерархическое навигационное меню на моей боковой панели, которая использует вложенные списки (<ул.> и <литий> теги). Я использую предварительно сделанную тему, которая уже имеет стили для элементов списка, но я хочу измениться, стиль для объектов верхнего уровня, но НЕ иметь его относятся к подэлементам. Существует ли простой способ применить стили к тегу элемента списка верхнего уровня, не имея тех стилей каскад вниз к его дочерним элементам списка? Я понимаю, что могу явно добавить переопределяющие стили к подэлементам, но я действительно хотел бы избежать необходимости копировать весь тот код стиля, если существует простой способ просто сказать, "применяют эти стили к этому классу и НЕ располагают каскадом их вниз ни к каким дочерним элементам". Вот HTML, который я использую:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Таким образом, CSS имеет стили для #sidebar ul и #sidebar ul li уже, но я хотел бы добавить дополнительные стили к #sidebar .top-level-nav это НЕ располагается каскадом вниз его поддетям. Есть ли любой способ сделать это просто, или сделать я должен перестроить все стили так стили, которые шли #sidebar ul теперь характерны для определенных классов?

80
задан Saeed Hassanvand 5 October 2019 в 22:59
поделиться

4 ответа

Пока нет родительских селекторов (или, как их называет Шон Инман , квалифицированных селекторов ), поэтому вам придется применить стили к элементам дочернего списка, чтобы переопределить стили в элементах родительского списка.

Каскадирование - это своего рода суть каскадных таблиц стилей, отсюда и название.

32
ответ дан 24 November 2019 в 09:52
поделиться

Вы либо используете дочерний селектор

. Таким образом, использование

#parent > child

сделает только дочерние элементы первого уровня, к которым будут применены стили. К сожалению, IE6 не поддерживает дочерний селектор.

В противном случае вы можете использовать

#parent child child

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

71
ответ дан 24 November 2019 в 09:52
поделиться

Вы можете использовать что-то вроде jQuery, чтобы "отключить" это поведение, хотя я не думаю, что это хорошее решение, поскольку вы получаете логику отображения в css и javascript. Тем не менее, в зависимости от ваших требований, вы можете обнаружить, что утилиты css jQuery облегчают вам жизнь, чем попытки взломать css, особенно если вы пытаетесь заставить его работать в IE6

2
ответ дан 24 November 2019 в 09:52
поделиться

just set them back to their defaults in the "#sidebar ul li" selector

0
ответ дан 24 November 2019 в 09:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: