Как применить стиль ко всем дочерним элементам элемента


102

У меня есть элемент с class='myTestClass'. Как применить стиль CSS ко всем дочерним элементам этого элемента? Я хочу применить стиль только к дочерним элементам. Не его внуки.

Я мог бы использовать

.myTestClass > div {
  margin: 0 20px;
}

которые работают для всех divдетей, но я хотел бы решение, которое работает для всех детей. Я думал, что смогу использовать *, но

.myTestClass > * {
  margin: 0 20px;
} 

не работает.

редактировать

.myTestClass > *Селектор не применяется правило в светлячок 26, и нет никакого другого правила для края в соответствии с поджигатель. И он работает, если я заменю *на div.


2
Как это «не работает»? Помните, что потомки этих дочерних элементов (вероятно) унаследуют большинство стилей, назначенных этим дочерним элементам.
Дэвид говорит, что нужно восстановить Монику

Отладьте это с помощью инспектора и посмотрите, есть ли правило, которое его берет на себя
Brewal

Ответы:


147

Как прокомментировал Дэвид Томас , потомки этих дочерних элементов (вероятно) унаследуют большинство стилей, назначенных этим дочерним элементам.

Вам нужно обернуть .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>


4
Никогда не используйте универсальный селектор. Это сильно влияет на производительность рендеринга.
yesIcan

4
@yesIcan: Хорошо, это полезно знать .... у вас есть альтернативное решение, в котором не используется универсальный селектор?
Мэтью Николс

8
Производительность универсального селектора в современных браузерах не так уж и плоха. Вот ссылка . Мой собственный опыт работы подтверждает вывод автора.
Натан

-2

Вместо *селектора вы можете использовать :not(selector)с >селектором и установить что-то, что определенно не будет дочерним.

Изменить: я думал, что это будет быстрее, но оказалось, что я ошибался. Не обращайте внимания.

Пример:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

5
В чем преимущество этого?
Уилсон Биггс

3
@WilsonBiggs - похоже, это ошибочная попытка «не использовать универсальный селектор». Но это явно плохая идея, поскольку она «почти универсальна», но требует дополнительного тестирования - так что он должен выполнять всю работу, которую сделал бы универсальный селектор, а затем выполнять дополнительную работу.
ToolmakerSteve

: not (селектор) работает только на сафари, и не похоже, что он будет работать на chrome / firefox
gtamborero
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.