Як замінити властивості класу CSS за допомогою іншого класу CSS

Я досить новачок у CSS3, і я хочу мати можливість робити наступне:

Коли я додаю клас до елемента, це замінює властивості іншого класу, що використовується в цьому конкретному елементі.

Скажімо, що я маю

<a class="left carousel-control" href="#carousel" data-slide="prev">

Я хочу мати змогу додати клас bakground-none, який називається , який буде заміняти фон за замовчуванням у класі left.

Дякую!

Існують різні способи, якими властивості можна замінити. Якщо припустити, що у вас є

.left { background: blue }

наприклад, будь-що з наведеного може замінити це:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Перші два "виграють" за специфікою селектора; третій перемагає !importantтупим інструментом.

Ви також можете організувати таблиці стилів так, щоб, наприклад, правило

.background-none { background: none; }

виграє просто по порядку, тобто, будучи після інакше однаково «потужними» правил. Але це накладає обмеження і вимагає обережності при будь-якій реорганізації таблиць стилів.

Це все приклади каскаду CSS , вирішальної, але широко неправильно зрозумілої концепції. Він визначає точні правила вирішення конфліктів між правилами таблиці стилів.

PS Я використовував leftі background-noneяк вони використовувались у питанні. Вони є прикладами назв класів, які не слід використовувати, оскільки вони відображають конкретні візуалізації, а не структурні чи смислові ролі.

Просто !importantйого використання допоможе перемогти

background:none !important;

Хоча це, як кажуть, погана практика, !importantможе бути корисною для класів корисності, вам просто потрібно використовувати її відповідально, перевірте це: Коли Використання важливого - правильний вибір

Як альтернативу importantключовому слову, ви можете зробити селектор більш конкретним, наприклад:

.left.background-none { background:none; }

(Примітка: між іменами класу немає пробілу).

У цьому випадку правило буде застосовуватися, коли обидва .leftі .background-noneвказані в атрибуті класу (незалежно від порядку чи близькості).

Вам слід замінити, збільшивши специфічність вашого стилю. Існують різні способи підвищення специфічності. Вживання !importantяких впливає на специфіку, є поганою практикою оскільки воно порушує природний каскад у вашому стилі.

Наступна схема, взята з сайту css-tricks.com , допоможе вам створити правильну специфіку для вашого елемента на основі структури точок. Хто б конкретніше не мав вищих очок, виграє. Здається, що гра - чи не так?

Ознайомтесь із зразками розрахунків тут на css-tricks.com . Це допоможе вам зрозуміти концепцію дуже добре, і це займе лише 2 хвилини.

Якщо ви хочете виготовляти та / або порівнювати різні особливості самостійно, спробуйте цей калькулятор специфічності: https://specificity.keegan.st/ або ви можете просто використовувати традиційний папір / олівець.

Для подальшого читання спробуйте веб-документи MDN .

Все найкраще для невикористання !important .

Якщо ви будете перераховувати bakground-noneклас після інших класів, його властивості замінять уже встановлені. Не потрібно користуватися!important .

Наприклад:

.red { background-color: red; }
.background-none { background: none; }

і

<a class="red background-none" href="#carousel">...</a>

Посилання не матиме червоний фон. Зверніть увагу, що це лише переосмислює властивості, які мають селектор, менший або однаковий.

LIFO - це спосіб, яким браузер аналізує властивості CSS .. Якщо ви використовуєте Sass, оголосіть змінну, що називається як

"$ header-background: red;"

використовуйте його замість прямого призначення значень, таких як червоний або синій. Коли ви хочете змінити значення, просто переставте значення на

"$ header-background: blue"

тоді

background-color: $ header-background;

він повинен плавно перевизначити. Використання "! Важливо" - це не завжди правильний вибір. Це лише виправлення