Переопределить CSS заказ

Question

Моя ситуация такова:

file1. css

.position-relative{ position : relative !important; }

file2. css

.my-class{ 
     ...
     position : absolute !important; 
 }

my_page. html

...
<link rel="stylesheet" href="file1.css">
<link rel="stylesheet" href="file2.css">
...
<div class="my-class position-relative">
   ...
</div>

Теперь, если я открою консоль Chrome, я вижу, что этот div имеет активный position:absolute, унаследованный my-class, но я хочу, чтобы position: relative второго класса был активным.
Как я могу добиться этого БЕЗ изменения порядка импорта файлов?

До сих пор я пытался поменять порядок классов в div, но ничего, а также переопределить класс position-absolute в заголовке внутри <style> ... </style>, а также это не работает.

Answer 1

Ответ

Удалить !important из файла 2. css

Объяснение

Вы дали свой <div> 2 имени класса: "my-class" и "position-относительный". В обоих ваших css файлах вы указали атрибут «position» 2 классов.

Проблема в том, что атрибут position не может быть одновременно относительным и абсолютным. Но так как ваши файлы определяют положение «.my-class» и «.relative-position», а имя вашего класса «my-classlative-position», это означает, что он выберет тот, который вы определили последним (который является « absolute ").

Когда вы используете !important, он игнорирует стандартный порядок CSS3, включая стиль, записанный в вашем <header>. Однако, поскольку у вас есть !important как для file1. css, так и для file2. css, и ОБА, эти файлы манипулируют атрибутом position вашего <div> (который имеет 2 имени класса), поэтому он имеет приоритет position : absolute в файле 2. css.

Важно понимать, что css применяется к HTML элементам, а не к "классам". Имя класса определяет, к какому <div> применить стиль.

Answer 2

Вы можете переопределить стиль, указав более точное значение c при выборе элемента.

Например, можно просто добавить div в свой класс.

div.my-class {
   position: relative !important
}

Вы можете go еще дальше, делая:

div.my-class.position-relative {
   position: relative !important
}