Как получить все дочерние элементы, кроме внуков - PullRequest
Новая
       6

Как получить все дочерние элементы, кроме внуков

2 голосов
/ 14 июня 2011

Смотрите здесь: http://jsfiddle.net/QVhAZ/4/

Как я могу использовать *, но только для детей? В этом примере я бы хотел, чтобы он применялся только к «Дочерним» div с, а не к «Внуку (не должен быть красным)» div с.

Я не хочу применять класс к каждому "ребенку" div, я хочу сказать: 

div#Root *:depth(1)
{
    color: red;
}

Ответы [ 5 ]

4 голосов
/ 14 июня 2011

Вы имеете в виду это? 

div {margin:20px;}

div#Root > div {color:red;}

div#Root > div > div {color:black;}

http://jsfiddle.net/QVhAZ/20/

Также использование * селектора выбирает не только элементы div, но и все элементы - и это также намного медленнееон должен все разобрать.Обратите внимание, что цвет по-прежнему будет наследоваться всеми дочерними элементами, поэтому вы должны указать цвет, который вы хотите использовать для всех остальных.

2 голосов
/ 14 июня 2011

Попробуйте это 

div#Root > *
{
    color: red;
}
2 голосов
/ 14 июня 2011

Если вы хотите прямых детей, используйте дочерний селектор : 

div > * {
  /* styles for all direct children of div */
}

Примечание: свойство color распространяется каскадно, поэтому это становится немного сложнее. Вам придется сбросить свойство для внуков (см. Ответ easwee ). Но чтобы доказать, что это действительно так, посмотрите, как border ведет себя правильно - http://jsfiddle.net/QVhAZ/22/

1 голос
/ 14 июня 2011

Может быть, вам стоит обратиться к справочнику CSS Selector . 

element1 > direct-child {
}
0 голосов
/ 14 июня 2011

Если вы хотите, чтобы он работал во всех браузерах (особенно в IE6), вы должны указать внуки для дочерних элементов, чтобы можно было отключить любые стили, указанные в потомке, например:

HTML

<div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
</div>

STYLE 

.child{margin-left:10px;}
.grandchild{margin-left:0px;}

Битовое раздражение, но оно гарантирует, что оно работает в браузерах, которые не поддерживают селекторы CSS, такие как div > *

Вот тот же пример, который использовал @easwee, только измененный, поэтому он работает в IE6 http://jsfiddle.net/ajthomascouk/QVhAZ/24/

...