CSS - нацелен только на один слой

Question

В данный момент я работаю с Sharepoint, и сказать, что структура кода / компоновка - беспорядок, было бы огромным преуменьшением.У него есть левая навигация, и я хочу, чтобы все элементы там были стилизованы с div вокруг них (я бы предназначался для них индивидуально, но у Sharepoint есть сотни виджетов, каждый со своим собственным классом имени), например:

<div id="leftNav">
    <div id="widget1">
        <div></div>
        <div></div>
    </div>
    <div id="widget2">
        <div></div>
        <div></div>
    </div>
</div>

Я пробовал #leftNav div { }, но это также относится и к подразделам (и подразделам этих подразделов) - есть ли в любом случае просто цель для div "widget"?

Спасибо!

Answer 1

Используйте прямой детский комбинатор, >:

#leftNav > div {
    /* ... */
}

Answer 2

Вы можете использовать дочерний селектор , чтобы указать прямой дочерний элемент.

#leftNav > div