Почему новый пользовательский класс имеет приоритет над классом с другим именем из ранее загруженного файла? - PullRequest
Новая
       36

Почему новый пользовательский класс имеет приоритет над классом с другим именем из ранее загруженного файла?

0 голосов
/ 10 июня 2019

Я использую Bootstrap 4, загруженный из CDN.Я добавляю новый класс, определенный как: 

.pt-10 { padding-top: 10rem !important; }

Файлы CSS загружаются в HTML-документ в следующем порядке: 

<link href="bootstrap cdn css...">
<link href="my file">

В следующем HTML-коде я определяю элемент какэто: 

<div class="pt-10 pt-lg-0">

Мое желание состоит в том, чтобы это работало так же, как работают классы интервала начальной загрузки, где я получаю дополнение pt-10, когда я нахожусь на классах ниже шкалы lg, и pt-lg-0 дополнения, когда на LG и выше.

Результат: pt-10 всегда имеет приоритет над классом pt-lg-0 - не имеет значения размер экрана.

Но если я копируюзагрузите точный код для класса pt-lg-0 и просто вставьте его в мой пользовательский файл (до определения pt-10), он работает именно так, как я хочу.

Я не понимаю, почему это работает так, а не иначе?Похоже, это может быть связано с! Важно, но я не понимаю, почему.Может кто-нибудь пролить свет на это?

1 Ответ

0 голосов
/ 10 июня 2019

Правило № 1: CSS-файлы обрабатываются сверху вниз

Именно поэтому он называется «Каскадная таблица стилей».Каскадирование сверху вниз - это естественный порядок.Поскольку вы включаете файлы bootstrap , за которыми следуют ваши пользовательские файлы, ваши пользовательские стили победят.

Например: 

// Bootstrap declaration
.pt-0 {
    padding-top: 0 !important;
}

// Your custom styles
.pt-10 {
    padding-top: 10rem !important;
}

Они оба применяются к свойству padding-topи они оба имеют !important.Таким образом, более поздние загруженные стили выиграют!

Просто хочу уточнить: следующее работает только по той же причине: .pt-lg-0 определяется позже в файле, чем .pt-5. 

<div class="pt-5 pt-lg-0">...</div>

.pt-5 определяется в строке 8185, а .pt-lg-0 определяется в строке 9157 в файле bootstrap.css.


Правило № 2: селектор свыигрывает более высокая специфичность

Если к одному и тому же свойству элемента применяется несколько селекторов, выигрывает тот, у которого более высокая специфичность.

Например, если ваш макет выглядит следующим образом: 

<div id="test-container" class="container">
    <div class="pt-10 pt-lg-0">
        ...
    </div>
</div>

и у вас есть такие стили: 


.container#test-container .pt-10 {
    padding-top: 0rem !important;
}

.container .pt-10 {
    padding-top: 5rem !important;
}

.pt-10 {
    padding-top: 10rem !important;
}

Тогда, независимо от порядка загрузки стилей, вершина заполнения будет 0rem, поскольку селектор идентификатора имеет более высокую специфичность.

Правило № 3: медиазапросы не имеют специфичности!

Вы думали, что верхний отступ отступа будет равен 0, потому что вы можете подумать, что bootstrap имеет это padding-top: 0rem !imporant на большой точке останова?Не будетФактически, правила внутри медиазапросов не имеют приоритета над другими правилами стилей в той же таблице стилей.

Следовательно, ваш .pt-10 имеет приоритет над классом .pt-lg-0 все время, из-за Правило № 1 .


Решение

Чтобы получить то, что вы хотите, просто удалите !important из своего пользовательского класса: 

.pt-10 {
    padding-top: 10rem;
}

Это будет работать, потому что:

  1. Ваш стиль загружается после bootstrap , и для этого же элемента не определено padding-top, поэтому заполнение 10remtop будет применяться!
  2. На большой точке останова, поскольку .pt-lg-0 из bootstrap имеет !important, что имеет более высокий приоритет и, следовательно, будет переопределять ваш стиль топа заполнения 10rem!Если вы добавите !important в свой стиль заполнения 10rem, они будут иметь ту же специфичность.Следовательно, кто бы ни определил позже, побеждает.

демо: https://jsfiddle.net/davidliang2008/9sqn4xch/16/

...