Застосовуйте CSS Style до дочірніх елементів

232

Я хочу застосувати стилі лише до таблиці всередині DIV з певним класом:

Примітка: я б краще скористався css-селектором для дітей елементів.

Чому №1 працює, а №2 - ні?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Що я роблю неправильно?

css css-selectors

— римський м
джерело

Не забувайте, що селектори>, + та [] недоступні для IE6 та нижче.

— Ерік

309

Цей код div.test th, td, caption {padding:40px 100px 40px 50px;}застосовує правило до всіх thелементів, які містяться в divелементі з класом, названим test, на додаток до всіх td елементів та всіх caption елементів.

Це не те саме, що "всі td, thі captionелементи, які містяться в divелементі з класом test". Щоб досягти того, що вам потрібно змінити ваші селектори:

' >' не підтримується повністю старими браузерами (я дивлюся на вас, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Кен Браунінг
джерело

чи є спосіб писати div.test 3 рази?

— роман м

2

@rm Nope. Немає

— вкладених

2

@romanm Існує спосіб написання "div.test" 3 рази більше! вивчіть використання sass або менше фреймворків для запису файлів css! :)

— gillyb

@romanm - дивіться мою відповідь, використовуючи * для націлювання на всіх дітей, щоб запобігти повторенню, або використовувати .class> * для всіх прямих дітей. Це не важко.

— Річард Едвардс

Підказка про непідтримку в IE була дуже корисною, я намагався змусити деякі CSS працювати на DTCoreText на iOS, але він не працював, їх аналізатор гірший, ніж IE.

— Сирени

123

.test * {padding: 40px 100px 40px 50px;}

— Річард Едвардс
джерело

11

Зауважте, що * тут означає, що ви не можете його замінити будь-яким іншим більш конкретним правилом, оскільки це .test *було б найбільш конкретним правилом для кожного дочірнього елемента. Іншими словами, майте на увазі, що все, що ви вкладете всередину, .test *не може бути відмінено будь-яким більш конкретним правилом css, оскільки test *це найбільш конкретне правило.

— вадасамбар

81

> Селектор відповідає прямим дітям тільки, а НЕ нащадки.

Ти хочеш

div.test th, td, caption {}

або ймовірніше

div.test th, div.test td, div.test caption {}

Редагувати:

Перший каже

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

В той час як другий говорить

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

У оригіналі div.test > thсказано any <th> which is a **direct** child of <div class="test">, що означає, що воно буде відповідати, <div class="test"><th>this</th></div>але не відповідатиме<div class="test"><table><th>this</th></table></div>

— Грег
джерело

fwiw, тому що td та підпис у цьому селекторі "німі" - вони будуть відповідати будь-якому даному th / заголовку без огляду на div.test. Такий тип сліпого націлювання рідко є тим, що вам потрібно в CSS для будь-якого, крім найбільш загальних стилів.

— annakata

@annakata: це частина css фреймворку, я намагаюсь застосувати його локально

— roman m

10

Якщо ви хочете додати стиль у всіх дочірніх і немає специфікацій для html-тегів, тоді використовуйте його.

Батьківський тег div.parent

дитина тег всередині div.parent як <a>, <input>, і <label>т.д.

код: div.parent * {color: #045123!important;}

Ви також можете видалити важливе, його не потрібно

— користувач1369111
джерело

7

Ось якийсь код, який я нещодавно написав. Я думаю, що це дає основне пояснення поєднання імен класів / ідентифікаторів з псевдокласами.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Розгорніть фрагмент

— Позначити
джерело

CSS не дозволяє однорядкові коментарі, такі як //. Дивіться stackoverflow.com/questions/4656546/…

— Volker E.

4

div.test td, div.test caption, div.test th

працює для мене.

Дочірній селектор> не працює в IE6.

— Трейнгамер
джерело

2

Наскільки я це знаю:

div[class=yourclass] table {  your style here; }

або у вашому випадку навіть це:

div.yourclass table { your style here; }

(але це буде працювати для елементів, yourclassяких може не бути div) вплине лише на таблиці всередині yourclass. І, як каже Кен,> не підтримується скрізь (і div[class=yourclass]теж використовуйте позначення точки для класів).

— тунуз
джерело

0

Цей код також може виконати трюк, використовуючи синтаксис SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
джерело