Конфликты специфичности селектора CSS из-за нескольких таблиц стилей

Question

Хорошо, я читал через css-селекторы stackoverflow.в потоке здесь в чем отличие этого синтаксиса?Что означает ^ =?Что это выбирает?все?

[class^='Rating'] 

и

div.Rating0_5

Кроме того, здесь есть выражение здесь , которое гласит: Примечание: повторяющиеся вхождения одного и того же простогоселектор разрешен и увеличивает специфичность.

Что это значит?

Я спрашиваю, потому что мне приходится убирать много CSS-кода на сайте.Существует более десятка таблиц стилей, каждая из которых содержит более 200 строк кода, и есть стили, которые переопределяют друг друга среди таблиц стилей, возможно, даже внутри них, если повторяющиеся события повышают специфичность.Кропотливо проходить построчно по таблицам стилей, чтобы выяснить, какой конкретный класс, div и т. Д. Перекрывают другой, и некоторые из них имеют семь селекторов!Это практически невозможно для меня и очень напряженно.

Существует ли инструмент, который будет использоваться для наложения стилей поверх других стилей?Легко ли пользоваться и что именно делает?Если нет, то как я могу написать свой CSS с достаточной специфичностью, не имея слишком длинных селекторов, чтобы, мы надеемся, обеспечить уникальность, чтобы они не были перезаписаны другой таблицей стилей правил?

Спасибо, я надеюсь, что это имеет смысл, и кто-тобыл этот опыт.

Answer 1

^ = "начинается с" для селектора CSS. В вашем случае это будет применяться к классам с именами, начинающимися с «рейтинга».

С традиционным CSS вам нужно сделать действительно длинные селекторы, чтобы быть конкретными, и я думаю, что это утверждение означало, что у вас может быть дублирующий селектор, и стили будут объединены.

Что касается очистки CSS, у меня нет хорошего предложения для автоматического инструмента, но вы можете взглянуть на http://sass -lang.com / (SCSS) для лучшего синтаксиса слой поверх CSS, который делает переменные и наследование селекторов. Много ли очищает CSS.