Как предотвратить наследование 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", теперь специфичны для определенных классов.

10 75
css

10 ответов:

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

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

30

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

Так что с помощью

#parent > child

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

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

#parent child child

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

66

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

#sidebar ul li {
  all: initial;
}

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

29

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

пример

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

#parent * {
    white-space: initial;
}
22

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

9

короткий ответ: Нет, невозможно предотвратить наследование 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 is наследуемое свойство.

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

3

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

2

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

2

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

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

можно писать

ul#sidebar > li { color:black; }

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

2

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

0