Как можно увеличить вес у CSS селектора?

Вес (специфичность) селектора увеличивают, добавляя в него более «тяжёлые» части. Но чаще правильнее решить конфликт другим способом.

Способы увеличить

• Добавить класс или атрибут: .button → .toolbar .button.
• Повторить тот же класс: .button.button — (0, 2, 0) без привязки к разметке.
• Добавить id: #app .button — сильно, но потом трудно перебить.
• Через `:is()`: :is(#app, .button) .button — берётся вес самого сильного аргумента.
• `!important` — крайняя мера.

.button.button { color: white; }

Как лучше

• поставить правило позже в коде — при равной специфичности побеждает последнее;
• использовать @layer: стили в более позднем слое побеждают независимо от специфичности;
• держать специфичность низкой и одинаковой (БЭМ, по одному классу);
• для базовых стилей использовать :where(), чтобы их было легко переопределить.

Коротко для собеседования

Вес увеличивают дополнительным классом, повтором класса, id или :is(); но лучше управлять порядком и слоями, а не разгонять специфичность.

Подробнее: MDN — Каскадные слои