Внешний CSS! Важный переопределение встроенный! Важный - PullRequest
Новая
       5

Внешний CSS! Важный переопределение встроенный! Важный

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

У меня есть правило inline CSS, добавленное для удаления padding-top и padding-bottom из div, который добавляется с помощью внешней таблицы стилей CSS Правило, которое я не могу изменить, использует! Важный. Ниже приведены два div, которые я пытаюсь изменить. 

<div class="class1 class2 class3 class4">
<div class="class1 class5 class6">

Я объявил следующее: 

  .class2 {
    padding: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .class5 {
    padding: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

Но внешний файл CSS загружает это правило, переопределяя мое встроенное правило ; 

@media screen and (max-width: 767px) {
    .parent1 .parent2 .class1:first-child {
        padding-top: 17px !important;
    }
}
@media screen and (max-width: 767px) {
    .parent 1 .parent2 .class1:last-child {
        padding-bottom: 17px !important;
    }
}

Почему это отменяет мое встроенное правило CSS? Разве никакое встроенное правило (особенно с! Важным) не должно перекрывать все внешние CSS (даже с! Важным)? Насколько я понимаю, специфика заключается в том, что любой встроенный стиль имеет на два порядка больше специфичности

(1, 1, 0, 1, 0)

, чем многопользовательский с псевдо-селектором

(1, 0, 0, 4, 0).

См. Здесь документацию. Также здесь. И, конечно, здесь.

Редактировать: Похоже, мое понимание значений специфичности происхождения было ошибочным, как указано @myf. Встроенные <style>[css rules]</style> имеют то же оригинальное значение специфичности, что и файлы <link> css. Поэтому в моем первоначальном правиле CSS у меня была бы более низкая специфичность, чем у Squarespace. Только имеют более высокое значение специфичности происхождения. Пожалуйста, прочитайте ответ @myf, это очень полезно.

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Вы, по-видимому, перепутали происхождение встроенного стиля , которое исходит из физического HTML атрибута (<el style="[css declarations]">) с таблицей стилей на странице, имеющей "author" уровень происхождения специфика и происходит либо от <style>[css rules]</style> или <link rel="stylesheet" href="[css file url]">.

Элементы стиля и ссылки на странице равны по происхождению, атрибут более специфицирован по происхождению c.

Невозможно победить !important правила из встроенные уровень происхождения (атрибут) с !important правилом от автор уровень происхождения.

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

Я решил это, используя больше родительских селекторов, чем тот, который используется Squarespace. Я закончил тем, что использовал это; 

.parent1 .parent2 .parent3 .class {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Но я все еще не понимаю, почему это будет работать. Тем более что в документации конкретно (понятно?) Говорится, что встроенные значения содержат значение "b = 1" в порядке специфичности "a, b, c, d, e", в то время как у каждого родительского селектора есть только дополнительный "d = 1 "значение и! Важные значения имеют значение" a = 1 ".

Для справки, специфичность составляет

"! Важный 1/0 (если используется = 1, если not = 0), inline 1/0 (если inline = 1, если not = 0), id (общее использование #id), class / attrib / psuedo (total .class, [attrib] или: псевдо использование), элемент (всего html body header main nav et c. Использование) "

Таким образом, мой оригинальный селектор (без нескольких родителей) будет равен

" 1, 1, 0, 1, 0 "(EDIT: I used <style>css</style> NOT <el style="css"> therefore the actual value is "1, 0, 0, 1, 0" because <style> rules have the same specificity value as external <link> stylesheets)

, потому что я использую! Важный, так что" a = 1 ", используя встроенные" b = 1 "EDIT: "b=0", не используя идентификаторы" c = 0 ", используя 1 селектор класса" d = 1 ", не используя селектор элемента" e = 0 "

И селектор Squarespace будет равен

" 1, 0, 0, 4, 0, "

, потому что! Важный" a = 1 ", не встроенный" b = 0 ", а не u синг-идентификаторы "c = 0", 4 класса / псевдоиспользования всего "d = 4", без использования селектора элемента "e = 0".

Поэтому мой оригинальный селектор должен был переопределить селектор Squarespace.

Но вместо этого единственным новым селектором, равным

"1, 1, 0, 4, 0" EDIT: "1, 0, 0, 4, 0" see above edit

(см. Ниже), является единственным это сработало.

Потому что! важный "a = 1", встроенный "b = 1", без использования идентификаторов "c = 0", четыре класса используют "d = 4", не используя селектор элементов "e = 0"

...