Применить стиль CSS к дочерним элементам - PullRequest
Новая
       38

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

202 голосов
/ 10 марта 2009

Я хочу применить стили только к таблице внутри 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>

Что я делаю не так?

Ответы [ 7 ]

284 голосов
/ 10 марта 2009

Этот код "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;
}
106 голосов
/ 24 мая 2012 
.test * {padding: 40px 100px 40px 50px;}
75 голосов
/ 10 марта 2009

Селектор > соответствует только прямым потомкам, но не потомкам.

Вы хотите 

div.test th, td, caption {}

или более вероятно 

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

Edit:

Первый говорит 

  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>

10 голосов
/ 02 мая 2013

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

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

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

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

Вы также можете удалить важные, это не обязательно

5 голосов
/ 26 ноября 2012

Вот код, который я недавно написал. Я думаю, что это дает базовое объяснение объединения имен классов / идентификаторов с псевдоклассами. 

.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>
4 голосов
/ 10 марта 2009 
div.test td, div.test caption, div.test th

у меня работает.

Дочерний селектор> не работает в IE6.

2 голосов
/ 10 марта 2009

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

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

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

div.yourclass table { your style here; }

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...