Применить стиль CSS к дочерним элементам

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 Нет. Там нет вложения правил или группирования типа «с»

— sblundy

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>

— Greg
источник

fwiw, потому что td и заголовок в этом селекторе «тупой» - они будут соответствовать любому заданному заголовку без учета div.test. Такого рода слепое нацеливание редко используется в CSS для чего-либо, кроме самых общих стилей.

— Annakata

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

— Roman M

10

Если вы хотите добавить стиль во всех дочерних элементах и не указывать спецификацию для тега html, используйте его.

Родительский тег div.parent

дочерний тег внутри div.parent, как <a>, <input>и <label>т. д.

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

Вы также можете удалить важные, его не требуется

— user1369111
источник

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.

— Traingamer
источник

2

Насколько я знаю это:

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

или в вашем случае даже это:

div.yourclass table { your style here; }

(но это будет работать для элементов, yourclassкоторые не могут быть divs), повлияет только на таблицы внутри yourclass. И, как говорит Кен,> не поддерживается везде (и div[class=yourclass]тоже, поэтому используйте точечную запись для классов).

— tunnuz
источник

0

Этот код также может помочь, используя синтаксис SCSS

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

— greguintow
источник