Css проблема селектора - дети и родитель?

Question

Интересно, как я могу выбрать ТОЛЬКО "Mega Parent" верхнего уровня в моем примере?

<li class="page_item parent"><a href="#"> Mega Parent</a>
        <ul class="children">
            <li class="page_item parent"><a href="#">Subparent</a>
                <ul class="children">
                    <li class="page_item"><a href="#">Child</a></li>
                </ul>
            </li>
        </ul>
    </li>

Я хочу, чтобы только у моего верхнего родительского элемента "Mega Parent" был, например, красный цвет. Какой лучший способ решить это?

Answer 1

Вы можете использовать что-то вроде этого:

.page_item.parent > a { color: red; }
.page_item.parent li > a { color: inherit; }

Или вы можете добавить дополнительный класс к элементу вашего мегаполента, который устанавливает дополнительный стиль.

Answer 2

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

.page_item.parent a{ color:red; }

.page_item.parent ul.children .page_item.parent{ color:black;}

или любой другой вид стилей по умолчанию, вы также можете просто добавить второй селектор к другому определению.

Answer 3

CSS использует наследование для определенных значений, возможно, вам пришлось вручную установить color для потомков, чтобы отрицать наследование.

См. Объяснение здесь:

http://dorward.me.uk/www/css/inheritance/