Як застосувати стиль до всіх дочірніх елементів


101

У мене є елемент с class='myTestClass'. Як застосувати стиль css до всіх дочірніх елементів цих елементів? Я хочу застосувати стиль лише до елементів дітей. Не його внуки.

Я міг би використати

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

які працюють для всіх divдітей, але я хотів би рішення, яке працює для всіх дітей. Я думав, що можу використати *, але

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

не працює.

Редагувати

.myTestClass > *Селектор не застосовується правило в світлячок 26, і немає ніякого іншого правила для краю в відповідно до палій. І це працює, якщо я заміню *на div.


2
Як це "не працює"? Майте на увазі, що нащадки цих дочірніх елементів (ймовірно) успадкують більшість стилів, призначених цим дочірнім елементам.
Девід каже відновити Моніку

Налагодьте це з інспектором і подивіться, чи існує правило, яке це приймає
Бреваль,

Відповіді:


145

Як коментував Девід Томас , нащадки цих дочірніх елементів (ймовірно) успадкують більшість стилів, призначених цим дочірнім елементам.

Вам потрібно обернути свій .myTestClassвнутрішній елемент і застосувати стилі до нащадків, додавши .wrapper * селектор нащадків . Потім додайте .myTestClass > * дочірній селектор, щоб застосувати стиль до елементів дітей, а не до його головних дітей. Наприклад, ось так:

JSFiddle - DEMO

.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
Ніколи не використовуйте універсальний селектор. Це має великий вплив на продуктивність на рендеринг.
такIcan

3
@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.