Вложенность CSS и специфичность
Специфичность specificity вложенного селектора вычисляется с использованием наибольшей специфичности в соответствующем списке селекторов. Это идентично тому, как вычисляется специфичность при использовании функции :is().
<b class="foo"> <c>Blue text</c> </b>
& синтаксис вложенности
#a, b {
& c {
color: blue;
}
}
.foo c {
color: red;
}
:is() синтаксис
:is(#a, b) {
& c {
color: blue;
}
}
.foo c {
color: red;
}
В этом примере селектор по id (#a) имеет специфичность 1-0-0, а селектор по типу (b) имеет специфичность 0-0-1. Вложенный селектор & и псевдокласс :is() оба используют специфичность 1-0-0, даже если селектор по id #a никогда не используется.
Селектор по классу .foo имеет специфичность 0-1-0. Это приводит к общей специфичности 1-0-1 для & c и 0-1-1 для .foo c, что означает, что color: blue; побеждает.
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity
