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

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

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

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

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

Итак, используя

#parent > child

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

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

#parent child child

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

Существует свойство называется allв модуле CSS3 наследования . Это работает так:

#sidebar ul li {
  all: initial;
}

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

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

пример

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

#parent * {
    white-space: initial;
}

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

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

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

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

.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>

Таблицы поддержки браузера в соответствии с Могу ли я использовать ...

• all (В настоящее время нет поддержки как в IE, так и в Edge, другие хороши)
• initial (В настоящее время нет поддержки в IE, другие хороши)

В некоторых случаях вы можете найти это полезным, используя прямой селектор дочерних элементов> . Пример:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Стиль границы был применен только к прямым дочерним <li>элементам, так как borderэто ненаследуемое свойство. Но цвет текста был применен ко всем дочерним элементам, как colorэто унаследованное свойство.

Следовательно, >селектор будет полезен только с ненаследуемыми свойствами, когда дело доходит до предотвращения наследования.

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

Например, если у вас есть два 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'.

Вам не нужна ссылка на класс для lis. Вместо CSS вроде

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

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

ul#sidebar > li { color:black; }

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

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