Блог

Главная - Вопросы по программированию - Как определить CSS-селектор, но не тогда, когда он вложен в себя?

Как определить CSS-селектор, но не тогда, когда он вложен в себя?

#css #css-selectors

#css #css-селекторы

Вопрос:

Как определить CSS-селектор, который нацелен только на элемент самого высокого уровня, но не на те элементы, которые вложены в тот же самый селектор?

Например, правила стиля применяются к .card элементу, но не к элементам .card .card или .card .card .card … ?

Ответ №1:

Вы можете отменить стиль дочерних элементов с помощью комбинатора-потомка

 .card {
    border: 1px solid black; /* orig style */
    height: 200px;
    width: 50%;
}

.card {
    border: 5px solid red; /* "highest level element of itself" */
}

.card .card {
    border: 1px solid black; /* children of the "highest level element" */
}  
 <body>
  <div class="card">
    <div class="card">
      <div class="card"></div>
    </div>
  </div>
</body>

Комментарии:

1. На самом деле я использую SCSS, и в этом случае я перезаписываю правило стиля, созданное моими пользовательскими конфигурациями переменных в Bootstrap framework… Если мне нужно явно определить правило перезаписи для вложенных экземпляров этого основного селектора, то я теряю возможность конфигурирования с переменными (если только я не попытаюсь имитировать оригинальный способ конфигурирования для этого правила, как это делается самой платформой). Кажется, это то, что мне нужно сделать, если нет другого способа.

2. Понятно. Это может быть так, но я думаю, что это отдельная проблема — возможно, программисты, разбирающиеся в SCSS , могут помочь. На данный момент другой подход, который я могу предложить, заключается в некоторых изменениях разметки — просто создайте другой класс для элемента самого высокого уровня, чтобы вы могли повысить CSS специфичность или, возможно, если родительский элемент самого высокого .card элемента можно определить, вы можете использовать дочерний комбинатор