Как отменить правило глобального селектора внутри определенного тега? - PullRequest
Новая
       11

Как отменить правило глобального селектора внутри определенного тега?

0 голосов
/ 11 июля 2019

У меня есть глобальное правило css: 

li *:last-child {
  margin-bottom: 0;
}

Внутри тега <nav> Мне нужно, чтобы эта роль не работала.Например, у меня есть код: 

<nav>
  <ul>
    <li>
      <span class='foo'>Foo</span>
    </li>
  </ul>
</nav>

.foo {
  margin: 1rem;
}

Я хочу, чтобы роль для класса foo работала.Я попробовал: 

nav li *:last-child {
  margin-bottom: unset;
}

Не работает.Объявлять правило для класса foo вместе с другим селектором вместе - не вариант для моего случая: 

.foo, nav li .foo:last-child {
  margin: 1rem;
}

Это потому, что я определяю правила в эмоциях фреймворка js.

Я знаю, что яМожно добавить !important к .foo правилу, но это не очень хорошая практика.Что я могу сделать, чтобы решить мой вопрос?

UPD.Я обнаружил, что в эмоциях я могу использовать & заполнитель для названия класса.И я могу определить свойство margin: 

 &, nav li &:last-child {
  margin: 1rem;
}

1 Ответ

1 голос
/ 11 июля 2019

У вас не может быть глобального селектора , а не , предназначенного для отдельного элемента - вам придется перезаписать глобальное правило вторичным правилом, которое применяет поведение, которое вы хотите применить только к определенному элементу. , Обратите внимание, что это вторичное правило должно иметь более высокую специфичность .

Самый простой способ сделать это - использовать селектор li .foo, который обладает большей специфичностью, чем селектор li *:last-child, и поэтому перезаписывает его:

Foo

Это можно увидеть в следующем: 

li *:last-child {
  margin-bottom: 0;
}

li .foo {
  margin: 1rem;
}
<nav>
  <ul>
    <li>
      <span class='foo'>Foo</span>
    </li>
  </ul>
</nav>
...