Как сказать CSS «использовать следующее наиболее конкретное c правило для определения этого свойства» - PullRequest
Новая
       13

Как сказать CSS «использовать следующее наиболее конкретное c правило для определения этого свойства»

0 голосов
/ 06 января 2020

Я использую Material-UI и JSS для управления CSS, и я столкнулся с проблемой, когда стили отличаются между разработкой и производством.

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

ie. для элемента <div class = "foo bar"/> в разработке таблица стилей выглядит следующим образом: 

.foo {
    color: red; 
}

.bar {
    color: blue; 
}

, а в процессе работы она будет выглядеть следующим образом: 

.bar {
    color: blue; 
}

.foo {
    color: red; 
}

, в результате чего они будут выглядеть по-другому.

Что мне интересно, так это то, что для правила .bar я могу применить что-то вроде color: unset, чтобы сказать CSS - «Не обращайте на меня внимания, пусть другие правила устанавливают это». 

.bar {
  color: blue; 
}

.foo {
  color: red; 
}

p.foo {
  /*do what here?  I want the color to be blue, without explicitly setting it this way*/
}
<p class = "foo bar">
   hello world!
</p>

1 Ответ

0 голосов
/ 06 января 2020

Если я правильно понимаю, вы хотите, чтобы .bar элементы имели синий цвет, а .foo элементы имели красный цвет, но когда оба они используются, вы хотите, чтобы цвет был синим. Если это так, вам просто нужно сделать правило .bar более конкретным c, чем правило .foo. Вы могли бы сделать это несколькими способами.

Можно создать правило, которое явно охватывает случай, когда оба класса используются одновременно. Это гарантирует, что в этих случаях всегда используется правильный цвет: 

.foo.bar { 
  color: blue;
}

В качестве альтернативы, вы можете определить определенные теги c, на которых может отображаться .bar, и создать правила для каждого случая. Это придаст этим правилам более высокую специфичность, и они выиграют у менее специфического c .foo правила: 

div.bar,
p.bar, 
h1.bar {
  color: green;
}

Кроме того, в случае CSS специфичность является незнакомой концепцией, CSS Трюки и MDN имеют хорошие объяснения.

...