У меня есть элемент с class='myTestClass'
. Как применить стиль CSS ко всем дочерним элементам этого элемента? Я хочу применить стиль только к дочерним элементам. Не его внуки.
Я мог бы использовать
.myTestClass > div {
margin: 0 20px;
}
которые работают для всех div
детей, но я хотел бы решение, которое работает для всех детей. Я думал, что смогу использовать *
, но
.myTestClass > * {
margin: 0 20px;
}
не работает.
редактировать
.myTestClass > *
Селектор не применяется правило в светлячок 26, и нет никакого другого правила для края в соответствии с поджигатель. И он работает, если я заменю *
на div
.
css
css-selectors
MTilsted
источник
источник
Ответы:
Как прокомментировал Дэвид Томас , потомки этих дочерних элементов (вероятно) унаследуют большинство стилей, назначенных этим дочерним элементам.
Вам нужно обернуть
.myTestClass
элемент внутрь и применить стили к потомкам, добавив.wrapper *
селектор потомков . Затем добавьте.myTestClass > *
дочерний селектор, чтобы применить стиль к дочерним элементам, а не к его внукам. Например так:JSFiddle - ДЕМО
.wrapper * { color: blue; margin: 0 100px; /* Only for demo */ } .myTestClass > * { color:red; margin: 0 20px; }
<div class="wrapper"> <div class="myTestClass">Text 0 <div>Text 1</div> <span>Text 1</span> <div>Text 1 <p>Text 2</p> <div>Text 2</div> </div> <p>Text 1</p> </div> <div>Text 0</div> </div>
источник
Вместо
*
селектора вы можете использовать:not(selector)
с>
селектором и установить что-то, что определенно не будет дочерним.Изменить: я думал, что это будет быстрее, но оказалось, что я ошибался. Не обращайте внимания.
Пример:
.container > :not(marquee){ color:red; } <div class="container"> <p></p> <span></span> <div>
источник