CSS первый div, но не второй селектор

Question

Я хочу сопоставить элементы деления первого поколения (все они), но НЕ НИКАКИХ из их детей.Поэтому, если бы я использовал селектор, чтобы применить границу 1 (как визуально ниже), получился бы контейнер, а 2 (как визуально ниже) НЕ получил бы контейнер.Как мне сконструировать этот селектор, пожалуйста?

<div id="container">
<div>1<div>2</div></div>
<div>1<div>2</div></div>
<div>1<div>2</div></div>
</div>

Answer 1

#container > div {
   border: 1px solid #f0f;
}

Answer 2

Поскольку один браузер в частности (IE6) не поддерживает дочерний селектор >, вы можете использовать дочерние селекторы вместо того, чтобы добавить границу к первому потомку и удалить ееот потомка потомка.

HTML

<div id="container">
    <div>1
       <div>2</div>
    </div>
    <div>1
        <div>2</div>
    </div>
    <div>1
        <div>2</div>
    </div>
</div>

CSS

#container div {
    border:1px dashed grey;
}

#container div div {
    border:none;
}

Если IE6 - браузер, вам нужно поддерживать, тогда селектор > уже ответилэто самый простой способ стилизовать ребенка.

Answer 3

Селектор для этого:

div#container > div

или просто

#container > div

Мне действительно нравится SelectORacle , чтобы помочь понять селекторы CSS. Подробнее о Детских селекторах от Эрика Мейера.

ОБНОВЛЕНИЕ ДЛЯ Microsoft Internet Explorer 6

Если поддержка > вызывает беспокойство, как и в случае с MSIE6, традиционный способ, которым я использовал его, состоял в том, чтобы установить стили для первого поколения, а затем сбросить их для каждого другого потомства. Итак, вот так:

#container div { border: 1px solid #000; }
#container div div { border: none; }
#container div div div { border: none; }
#container div div div div { border: none; }

Вы делаете это с таким количеством поколений, сколько вам нужно. Выше я допускаю еще 3 уровня вложенности (достаточно?) Это не красиво, но надежно.

Answer 4

Лучший способ - использовать непосредственный дочерний селектор (>):

#container > div {
  border: 1px solid red;
}

(IE6 не поддерживает это)