Примените стиль CSS к дочерним элементам
-
08-07-2019 - |
Вопрос
Я хочу применять стили только к таблице внутри 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>
Что я делаю не так?
Решение
Этот код "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;
}
Другие советы
.test * {padding: 40px 100px 40px 50px;}
В >
селектор соответствует только прямым дочерним элементам, а не потомкам.
Ты хочешь
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>
Если вы хотите добавить стиль во все дочерние элементы и не указывать спецификацию для html-тега, тогда используйте его.
Родительский тег div.parent
дочерний тег внутри div.parent, подобный <a>
, <input>
, <label>
и т.д.
код : div.parent * {color: #045123!important;}
Вы также можете удалить важное, это не обязательно
Вот некоторый код, который я недавно написал.Я думаю, что это дает базовое объяснение объединения имен классов / идентификаторов с псевдоклассами.
.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>
div.test td, div.test caption, div.test th
работает на меня.
Дочерний селектор > не работает в IE6.
Насколько я знаю, это:
div[class=yourclass] table { your style here; }
или в вашем случае даже это:
div.yourclass table { your style here; }
(но это будет работать для элементов с yourclass
этого могло бы и не быть div
s) повлияет только на таблицы внутри yourclass
.И, как говорит Кен, > поддерживается не везде (и div[class=yourclass]
тоже, поэтому используйте точечную нотацию для классов).