Правило CSS не применяется должным образом

Question

У меня есть код ниже.Первый тег 'ul' с идентификатором selected-plays содержит 3 дочерних тега li (не потомков).Я пытаюсь применить несколько правил CSS к этим дочерним тегам.

Мой код jQuery добавляет класс «горизонтальный».Обратите внимание, что селектор указывает только на дочерние теги родительского элемента с идентификатором #selected-plays

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>

Первые 3 свойства (margin, float, list-style) применяются к трем дочерним тегам 'li', как и ожидалось, но последнее свойствот.е. цвет применяется ко всем элементам (потомкам) в родительском элементе.Почему это происходит?

Answer 1

Унаследованные свойства

ОТ MDN

Если для элемента не указано значение для унаследованного свойства, элементполучает вычисленное значение этого свойства в родительском элементе.Только корневой элемент документа получает начальное значение, указанное в сводке свойства.Типичным примером унаследованного свойства является свойство color.

Вы можете просто добавить стиль color:initial к дочерним элементам, чтобы сохранить стили.Селектор может быть предварительно задан в css или может быть добавлен через скрипт.Вы можете иметь различные селекторы в зависимости от структуры, например li > *, li > li или li li и т. Д.

Answer 2

Дочерние теги <li> наследуют значение цвета от родительских тегов <li>, которые имеют класс .horizontal. Вы можете попробовать переопределить цвет дочернего тега, добавив правило стиля, например:

.horizontal li { color: initial; }

Answer 3

Это ожидаемое поведение, поскольку дочерние элементы автоматически наследуют настройку color своего родителя.Если вы не хотите этого поведения, вы можете установить цвет детей в CSS:

#selected-plays li li {
  color: initial;
}

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

#selected-plays li li {
  color: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>