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

Question

У меня есть иерархическое меню навигации на боковой панели, которое использует вложенные списки (теги

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

Answer 1

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

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

#parent > child

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

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

#parent child child

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

Answer 2

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

#sidebar ul li {
  all: initial;
}

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

Answer 3

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

Каскадное обозначение всего сущности каскадных таблиц стилей, отсюда и название.

Answer 4

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

Пример

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

#parent * {
    white-space: initial;
}

Answer 5

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

Answer 6

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

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

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

.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> s, так как border не является наследуемым свойством. Но цвет текста был применен ко всем дочерним элементам, так как color является унаследованным свойством.

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

Answer 7

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

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

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

ul#sidebar > li { color:black; }

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

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

Answer 9

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

Answer 10

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