Почему css presedence / специфичность моей страницы ведет себя по-разному с импортированной библиотекой css (hexagon js) - PullRequest
Новая
       6

Почему css presedence / специфичность моей страницы ведет себя по-разному с импортированной библиотекой css (hexagon js)

1 голос
/ 21 февраля 2020

В проекте, в котором я сейчас работаю, я использую библиотеку hexagon js для добавления ползунков. Чтобы использовать эти ползунки, я импортировал файлы шестиугольника. js и шестиугольника. css в каталог моего проекта. Шестиугольник css необходим для правильного изображения ползунков. Я загружаю страницу css после шестиугольника css. В моем файле javascript, который я загружаю в ползунки после того, как DOM и файлы css полностью загружены (возможно, это перезагрузит / даст преимущество шестиугольнику css файла?).

Дело элемента h3; На моей странице css (я работаю с sass, но это не должно быть разницей?) Я назначаю h3 цвет, даже в сочетании с классом для повышения специфичности. 

*page.css*
h3.logo
  color: #000

Теперь согласно Инструменты разработчика FF рассчитываются на другой цвет через шестиугольник. css Селектор h3; изменив его цвет среди других настроек на другое значение. Что странно, потому что селектор h3 должен иметь меньшую специфичность, и если бы я не добавил класс, мое правило css должно было бы иметь преимущество, потому что оно загружалось последним. даже добавление! важно не сработает. Комментирование строк в файле шестиугольника css, по-видимому, восстанавливало цвета, сохраняя некоторые отступы и различия полей. 

*hexagon.css*
h1,
h2,
h3,
h4,
h5,
h6,
.hx-header-large,
.hx-header-medium,
.hx-header-small,
.hx-header {
  font-family: 'Open Sans', sans-serif;
  font-family: var(--base-heading-font-family);
  color: #3D3D3D;
  color: var(--base-heading-text-color);

Случай элемента ссылки; исправляя заголовки, я заметил, что все мои ссылки тоже меняли цвет! Закомментируя необходимые строки 

a {
  color: #00ADA8;
  color: var(--base-link-color);
}

Удалил цвет 00ADA8, но дал ему другой цвет, в соответствии с инструментами разработчика FF, которые нужно вычислить из PreferenceStyleSheet: 2 , чего я не делаю не понимаю и не могу связываться с инструментами разработки. 

*|*:link 
  rgb(0, 0, 238)

Теперь вот мой вопрос

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

  • Есть ли способ придать целому файлу приоритет над другим css файлом?
  • Возможно ли, что загруженный javascript файл перезагружает прецеденты?
  • Есть ли определенный синтаксис css, о котором я не знаю?
...