Правило CSS не применяется должным образом
У меня есть код ниже. Первый тег 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:[email protected]">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, как и ожидалось, но последнее свойство, то есть цвет, применяется ко всем элементам (потомкам) в родительском элементе. Почему это происходит?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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:[email protected]">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>Унаследованные свойства
When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary. A typical example of an inherited property is the color property.
Вы можете просто добавить стиль color:initial к дочерним элементам, чтобы сохранить стили. Селектор может быть предварительно указан в css или также может быть добавлен через скрипт. У вас могут быть разные селекторы в зависимости от структуры, например. li > *, li > li или li li и т. д.
Дочерние теги <li> наследуют значение цвета от родительских тегов <li>, которые имеют класс .horizontal. Вы можете попробовать переопределить цвет дочернего тега, добавив правило стиля, например:
.horizontal li { color: initial; }
@SamiKh не забудьте принять ответ, если это помогло. Это также относится ко всем вашим предыдущим вопросам, поскольку я отмечаю, что вы еще не приняли ответа ни на один из них.