переопределение класса, когда два класса назначены одному div

Я создавал <div>тег, в котором я хотел применить два класса для <div>тега, который будет галереей эскизов. Один класс для его положения, а другой класс для его стиля. Таким образом, я мог применить стиль, у меня были некоторые странные результаты, которые поставили меня перед вопросом.

Можно ли присвоить <div>тегу два класса ? Если да, то какой из них преобладает над другим или какой из них имеет приоритет?

Div может быть назначено несколько классов. Просто разделите их в имени класса такими пробелами:

<div class="rule1 rule2 rule3">Content</div>

Этот DIV будет соответствовать никаким правилам стиля для трех различных селекторов класса: .rule1, .rule2и .rule3.

Правила CSS применяются к объектам на странице, которые соответствуют их селекторам в том порядке, в котором они встречаются в таблице стилей, и если существует конфликт между двумя правилами (более чем одно правило пытается установить один и тот же атрибут), то специфичность CSS определяет, какой правило имеет приоритет.

Если специфика CSS одинакова для конфликтующих правил, то более позднее правило (определенное позже в таблице стилей или в более поздней таблице стилей) имеет приоритет. Порядок имен классов в самом объекте не имеет значения. Порядок стилей в таблице стилей имеет значение, если специфика CSS такая же.

Итак, если у вас были такие стили:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Затем, поскольку оба правила соответствуют div и имеют точно такую ​​же специфичность CSS, второе правило применяется позже, поэтому оно будет иметь приоритет, а фон будет красным.

Если одно правило имело более высокую специфичность CSS ( div.rule1более чем .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Тогда он будет иметь приоритет, а цвет фона здесь будет зеленым.

Если два правила не противоречат друг другу:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Тогда будут применяться оба правила.

Фактически, класс, который определен последним в css, применяется к вашему div.

проверить это:

красный последний в css

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

против

синий последний в css

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Если вы спрашиваете о том, что у них такое же свойство, тогда, согласно правилу CSS, берется последнее утверждение.

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

В соответствии с приведенным выше примером он принимает последний оператор дерева CSS, который имеет расширение .green .

Класс, который определен последним в CSS, имеет приоритет, если ничего не применяется.

Прочтите о приоритете CSS, чтобы увидеть, как это работает.

Элементу можно назначить множество классов, вы просто разделяете их пробелом

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Из-за каскада в CSS к элементу будут применены правила перезаписи, расположенные ближе всего к концу документа.

Итак, если у вас есть

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

Будет использован красный цвет, но не цвет фона, так как он не был перезаписан.

Вы также должны учитывать специфику CSS, если у вас есть более конкретный селектор, будет использоваться этот:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

Здесь будет использоваться второй селектор, поскольку он более конкретен.

Вы можете взять с взглянуть на него все здесь .