css приоритет при вложенности: внешний класс выше, чем внутренний?

Question

Я не эксперт в CSS, поэтому следующее меня смущает. Мое основное понимание приоритета CSS заключается в том, что чем более конкретным является объявление, тем выше его приоритет.

С этим я думал, что обе ссылки должны иметь один и тот же цвет, так как в обоих случаях внутренний элемент имеет класс .inner. Но в моих тестах как с firefox, так и с хром (на основе), по первой ссылке применяется правило для a, опущенное от .container.

.container a{ 
 
    color: green; 
 
} 
 
.inner { 
 
    color: red; 
 
}

<div class="container"> 
 
    <a href="google.com" class="inner">first</a> 
 
    <a href="google.com" ><span class="inner">second</span></a> 
 
</div>

я могу решить мою проблему с обходным я использовал для второго звена, но я был бы счастлив, если бы я мог понять, что происходит;)

Answer 1

стили CSS будут применяться с сверху вниз Так первым, Зеленого цвета будет применен помечать

Когда дело доходит до .inner: красный Есть 2 элементов, которые получают пострадавший с ним - первым - промежуток внутри второй

Стиль первого элемента не будет написан красным цветом, так как он имеет высокий приоритет. Рассмотрим ниже значений в качестве примеров для проверки Приоритет Tag - 1 класс - 2 идентификатор - 3 (наивысший приоритет)

идентификатор -> класс -> элемент (тэг) для слева направо идет наивысшим приоритетом

Итак, в вашем случае .внутренний = 2 .container а = 2 + 1 = 3

Поскольку существует еще один элемент (SPAN) с классом '.inner', его цвет будет изменен на красный

Answer 2

.container a состоит из селектор классов и селектор типов, поэтому он более конкретный, чем .inner, который является просто селектором классов. Таким образом, элементы <a> являются зелеными.

Селекторы соответствуют только выбранным элементам, а .container a не соответствует <span class="inner">second</span>, но .inner.

Специфика здесь неактуальна, так как существует только один селектор, который соответствует, поэтому диапазон красного цвета.

---

Если .inner правило не существует, то таблица стилей браузера по умолчанию приведет к тому, пядь иметь color: inherit и было бы подобрать значение зеленого от родительского <a> элемента, который является соответствует по .container a.

Answer 3

Я думаю, вы можете понять, таким образом: -

Первое правило будет применяться к обеим ссылкам, так как <a> тега имеет шрифт зеленого цвета, но тогда у вас есть .inner правила с красным цветом, поэтому он будет перекрывать первый правило для внутреннего диапазона <a> тег.

А для первого <a> тег .inner не применяется из-за родительского класса, используемого в правиле тега <a>, поэтому это не повлияет на второе правило.