Class overrule, когда два класса назначаются одному div

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

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

Ответ 1

В 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;
}

Затем будут применены оба правила.

Ответ 2

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

проверить:

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

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

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

Ответ 3

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

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

CSS

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

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

Ответ 4

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

Прочитайте приоритет CSS, чтобы узнать, как это работает.

Ответ 5

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

<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;
}

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

Вы можете взять посмотреть на все это здесь.