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

У меня есть иерархическое меню навигации на боковой панели, в котором используются вложенные списки (теги & lt; ul & gt; и & lt; li & gt;). Я использую готовую тему, в которой уже есть стили для элементов списка, но я хочу изменить стиль для элементов верхнего уровня, но НЕ применять ее к подпунктам. Есть ли простой способ применить стили к тегу элемента списка верхнего уровня, БЕЗ того, чтобы эти стили каскадно касались его дочерних элементов списка? Я понимаю, что могу явно добавить переопределяющие стили к подэлементам, но я действительно хотел бы избежать дублирования всего этого кода стиля, если есть простой способ просто сказать "применить эти стили к этому классу и НЕ каскадировать их вплоть до любых дочерних элементов ". Вот 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, теперь были специфичны для определенных классов?

Ответ 1

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

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

Ответ 2

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

Таким образом, используя

#parent > child

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

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

#parent child child

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

Ответ 3

В модуле наследования CSS3 есть свойство под названием all. Это работает так:

#sidebar ul li {
  all: initial;
}

По состоянию на 2016-12 гг. все браузеры, кроме IE/Edge и Opera Mini, поддерживают это свойство.

Ответ 4

Вы можете использовать * селектор, чтобы изменить дочерние стили на значение по умолчанию

Пример

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

Ответ 5

Обертка с iframe делает родительский css устаревшим.

Ответ 6

Короткий ответ: Нет, невозможно предотвратить наследование CSS. Вы можете переопределять только те стили, которые установлены родителями. См. Спецификацию:

Каждый элемент документа HTML наследует все наследуемые свойства от его родителя, кроме корневого элемента (html), который не имеет родителя. - W3C

Помимо переопределения каждого унаследованного свойства. Вы также можете использовать ключевое слово initial. color: initial;. Он также может использоваться вместе с all, например. all: initial;, который будет reset всеми свойствами сразу. Пример:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Ответ 7

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

Ответ 8

Например, если у вас есть два div в документе XHTML.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Затем попробуйте это в CSS.

#div1 > #div2 > p{
    color: red;
}

влияет только на абзац div2.

#div1 > p {
    color: red;
}

влияет только на абзац 'div1'.

Ответ 9

Вам не нужна ссылка класса для li s. Вместо того, чтобы CSS как

li.top-level-nav { color:black; }

вы можете написать

ul#sidebar > li { color:black; }

Это применит стиль только к li, который немедленно спустится с боковой панели ul.

Ответ 10

просто верните их значения по умолчанию в селектор "#sidebar ul li"