клас замінює, коли одному класу присвоєно два класи

Я створював <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;
}

Тут буде використаний другий селектор, оскільки він є більш конкретним.

Ви можете поглянути на все це тут .