Специфичность и класс выбора (каскад)

Question

Предположим, мы хотим выяснить, каким будет свойство цвета конкретного элемента <h2>.

1) При попытке выяснить, насколько специфичен селектор, одно из правил гласит, что селектор с большим числом классов более специфичен, чем селектор с меньшим количеством классов. Таким образом, в следующем примере цвет конкретного <h2> должен быть зеленым (этот пример взят с какого-то веб-сайта):

.one .two .three .four .five .six .seven 
{
    color: green;
}


.eight .nine .ten
{
    color: blue;
}

а) Прежде всего, если я укажу более одного класса в селекторе, он не будет работать ... другими словами, текст не будет зеленым или синим. Есть идеи, почему это не работает?

б) Игнорирование того факта, что селектор не будет работать, если он содержит более одного класса: Являются ли классы .two .three .four .five .six .seven потомками класса .one или наш конкретный элемент <h2> является членом всех этих классов?

2) Другое правило гласит, что если мы выбираем селектор с большим числом идентификаторов, то он более специфичен, чем селектор с меньшим числом идентификаторов. Таким образом, в следующем примере цвет определенного <h2> должен быть зеленым:

#one #two # three #four #five #six #seven
{
   color: green;    
}


#eight #nine #ten
{
   color: blue;
}

a) Приведенное выше утверждение имеет смысл только в том случае, если # two является потомком one # , # three , потомком # two и внук # один и т. д. ?! Правильно?

3) Я предполагаю, что более конкретный селектор, определенный в пользовательском файле css , выбран из менее специфичного селектора, определенного в авторском файле css ?

1058 * спасибо *

EDIT:

Первое правило CSS применяется ко всем элементам с классом «семь», у которых есть предок с классом «шесть», которые, в свою очередь, имеют предка с классом «пять» и т. Д.

Хм, вы имеете в виду, что правило применяется к элементу E7, но только если: - E7 является членом класса .seven и потомком элемента E6 - E6 является членом класса .six и потомком элемента E5 - E5 является членом класса .5 и потомком элемента E4 и т. Д.

Могу ли я также спросить, верно ли мое предположение о моем втором вопросе (в первоначальном сообщении)?

Answer 1

Первое правило CSS применяется ко всем элементам с классом «семь», у которых есть предок с классом «шесть», которые, в свою очередь, имеют предка с классом «пять» и т. Д.

Необработанные вами правила не будут соответствовать никаким тегам h2, если у них нет класса "green" и всех этих элементов-предков. Я думаю, что ваш пример чертовски сложен, потому что правило специфичности вступает в игру только тогда, когда у вас есть огромный набор, по крайней мере, из восьми вложенных элементов!

Более простым примером может быть этот, который нацелен на тег h2 с тремя различными правилами (в произвольном порядке):

h2 { color: red; }
.one h2 { color: green; }
.two .three h2 { color: blue; }

h2 в этом примере будет красным:

<h2>Heading 2</h2>

h2 в этом примере будет зеленым:

<div class="one">
    <h2>Heading 2</h2>
</div>

h2 в этом примере будет синим. Даже если .one является ближайшим предком, .two и .three означают, что применяется последнее правило CSS.

<div class="two">
    <div class="three">
        <div class="one">
            <h2>Heading 2</h2>
        </div>
    </div>
</div>

Аналогичный процесс применяется для идентификаторов, за исключением того, что идентификаторы в 10 раз превышают «вес» классов. Посмотрите спецификации w3 для более подробной информации. Это довольно сложная тема, чтобы разобраться, но я надеюсь, что это прояснит все!

Честно говоря, такая ситуация возникает не так часто - я стараюсь придерживаться своих общих правил CSS и избегать множества вложенных элементов с разными именами классов. Если вам по-прежнему приходится разбираться со спецификой, ваш HTML, вероятно, становится слишком сложным!

Answer 2

Когда вы помещаете пробелы между селекторами классов, это означает "потомок" из ...

Вместо этого вы должны поместить их все вместе:

.one.two.three.four.five.six.seven 
{
    color: green;
}


.eight.nine.ten
{
    color: blue;
}

Что означает, что элемент со ВСЕМИ этими классами будет окрашен, вместо этого потомок всех элементов с классами в этом порядке