Вкладеність CSS і специфічність

специфічність селектора вкладеності & обчислюється за допомогою найбільшої специфічності в пов'язаному з ним списку селекторів. Це ідентично тому, як обчислюється специфічність при використанні функції :is().

<b class="foo">
  <c>Синій текст</c>
</b>

Синтаксис вкладеності &

#a, b {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

Синтаксис :is()

:is(#a, b) {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

У цьому прикладі селектор ідентифікатора (#a) має специфічність 1-0-0, тоді як селектор типу (b) має специфічність 0-0-1. Селектор вкладеності & та псевдоклас :is() обидва мають специфічність 1-0-0, навіть якщо селектор ідентифікатора #a ніколи не використовується.

Селектор класу .foo має специфічність 0-1-0. Це призводить до сумарної специфічності 1-0-1 для & c та 0-1-1 для .foo c, що означає, що color: blue; перемагає.

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.