CSS когда-либо заботится об отношениях "близости" DOM?

Question

С учетом следующего кода:

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.dark-background span {
  color: white;
}

.light-background span {
  color: black;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>

Самый внутренний диапазон соответствует как .dark-background span, так и .light-background span, так что, похоже, существует только связь с весом каскада CSS и каскадом, определяемым последним правилом, и никогда не указывается, насколько близки два селектора. в правиле есть друг к другу в HTML.

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

Answer 1

Если вы измените порядок объявлений, вы увидите изменение цвета текста. Более поздние определения переопределяют более ранние.

Вы можете использовать оператор >, чтобы несколько ограничить ваш выбор. #main > span будет соответствовать только диапазонам, расположенным непосредственно под #main, селектор + выбирает ближайшего брата в дом. и у вас есть nth-child в / около этого типа выбора. Это то, что вы имели в виду:

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

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.light-background span {
  color: black;
}

.dark-background span {
  color: white;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>

Answer 2

Прежде чем ответить на ваш вопрос, который представляет собой высокоуровневый вопрос о соответствии селектора в целом, давайте разберемся с вашей реальной проблемой. Все, что вы на самом деле пытаетесь сделать, это стилизовать каждый span в зависимости от того, является ли его родитель .light-background или .dark-background, и решение проблемы в вашем CSS заключается в простой замене наследующего комбинатора на дочерний комбинатор. :

.dark-background > span {
  color: white;
}

.light-background > span {
  color: black;
}

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.dark-background > span {
  color: white;
}

.light-background > span {
  color: black;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>

Учитывая это, почему ваш подход с потомками-селекторами не работает так, как ожидалось с самого начала? Вот где мы обратимся к вашему вопросу:

Заботится ли CSS когда-нибудь об отношениях "близости" DOM?

Нет, сложные селекторы, соответствующие одному и тому же элементу, сравниваются только по специфичности. И специфичность не учитывает близость элементов, сопоставляемых каждым составным селектором, потому что для этого требуется информация о DOM, а специфичность никогда не рассчитывается на основе какой-либо информации о DOM. Аналогично, сами комбинаторы не способствуют специфичности.

С учетом следующего примера:

<div class="A">
  <div class="B">
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
  </div>
</div>

В каждой из этих пар оба селектора соответствуют одному и тому же элементу и одинаково специфичны; поэтому второе правило всегда будет иметь приоритет над первым:

.B .C   {}
.B > .C {}

.B > .C {}
.B .C   {}

.A .C   {}
.B .C   {}

.B .C   {}
.A .C   {}

.D ~ .E {}
.D + .E {}

.D + .E {}
.D ~ .E {}

.C ~ .E {}
.D ~ .E {}

.D ~ .E {}
.C ~ .E {}

Можно ли применить правило, если элементы, выбранные селектором, ближе друг к другу, чем другие правила, которые могут совпадать?

Нет, в настоящее время это невозможно. В css-values-3 есть предложенная функция под названием toggle(), которая поможет в решении проблем, которые несколько похожи на ваши, но не совсем такие же. Но в последние несколько лет не было никакого интереса к его внедрению, поэтому он был наказан до уровня 4, и я не ожидаю, что реализации появятся как минимум в течение следующих 5 лет.