Когда вы возитесь со стилями образца кода, я считаю, что код имеет стили, которые переопределяют мой стиль, потому что они будут использовать ссылку с более высоким приоритетом (например: .div .class > .class).
Я столкнусь с такими ситуациями:
Как узнать, какой стиль переопределяет мой стиль? Я хочу избежать использования !important, потому что в конечном итоге я окажусь в той же ситуации.
EDIT: Я не спрашиваю, почему это происходит. Я уже знаю о приоритете, поэтому я упомянул, что .div .class имеет более высокий приоритет, чем .class. Я хочу проследить, что на самом деле используется вместо того, чтобы просто сказать мне, что он "неактивен". Кроме того, я уже знаю о Chrome Developer, потому что снятие экрана происходит из Chrome Developer.
РЕДАКТИРОВАТЬ: актуальная проблема исправлена, но вопрос все еще остается... есть ли более простой способ увидеть, что вызывает переопределение?
Исправление: мне просто нужен селектор в правильном порядке. .box сначала, затем .box-blue.
В devtools, в инспекторе стиля, выберите Computed. Найдите интересующую вас недвижимость и нажмите на нее. Вы увидите список всех правил, применяемых к этому свойству, с активным вверху и каждый с ссылкой на файл/строку, где он определен.
Рассмотрим следующий HTML:
<style>
#foo { color: red; }
p { color: blue; }
</style>
<p id="foo">What color am I?</p>
Вы увидите следующее:
Вы можете прокручивать вверх или вниз вкладку стилей в Dev Tools, которые вы используете из приведенного выше примера, чтобы найти селектор, переопределяющий .box-blue. После того, как вы нашли включенный border-color в другом стиле, вы можете определить, какой селектор переопределяет его.
Если вы создали стиль .box-blue с помощью border-color: red, например, его можно было бы переопределить другим стилем с возможно одним и тем же свойством border. Поскольку border: 1px solid blue может быть сокращением для border-width: 1px + border-style: solid + border-color: blue, тогда это может быть возможно переопределение предыдущего стиля.
Существует расширение браузера, помогающее в этом. Я использую "Веб-разработчик" в Firefox, но есть много других.
В Chrome также есть средство просмотрa > Разработчик > Инструменты разработчика.
Если вы наведите указатель мыши на элемент на экране, он расскажет вам свой путь (html > body > div.blah > span.foo) и какие стили CSS были применены к этому элементу.
Нет никакого окончательного способа сделать вывод о том, какой селектор переопределяет данный стиль (насколько я знаю), но интерфейс инструментов разработчика достаточно интуитивно понятен, чтобы нормально его выполнять.
Проигрывает ваш стиль с ударом. Чтобы узнать, какой селектор переопределяет его, найдите неровную версию того же правила.
Иногда это так же просто, как видеть:
color: red;удаp >
И нужно искать селектор с:
color: blue;
Инструменты Chrome dev фактически сортируют селекторы по приоритету, поэтому, если вы найдете переопределенный стиль, вам может быть гарантировано, что переопределение будет в том же селекторе или в одном из них над ним.
Но вы должны помнить, что некоторые правила состоят из других, а вы не всегда найдете соответствующее правило с тем же именем. В вашем примере ваше правило border-color переопределяется правилом border из указанного выше селектора. Правило границы является сокращением для указания border-width, border-style и border-color.
На вашем изображении вы можете увидеть, что правило .box-blue class border-color: #bce8f1 было переопределено border: 1px solid transparent (я не вижу селектор). Вы можете видеть файлы CSS переопределенных правил CSS правой стороны селекторов в инструменте "Проверка".
Иногда правила CSS могут быть изменены JavaScript. Это может быть показано как встроенный CSS.
В Firefox Developer Tools вы можете найти его в одном клике возле переопределенного свойства в Inspector:
Переопределенные объявления
Начиная с Firefox 43, переопределенные объявления имеют увеличение рядом с ними. Нажмите на увеличительное стекло, чтобы отфильтровать вид правила чтобы показать только правила, применяемые к текущему node, которые пытаются установить то же свойство: то есть полный каскад для данного свойство.
Это позволяет легко увидеть, какое правило переопределяет объявление:
Вот как это выглядит. Просмотрите видео, чтобы увидеть его в действии.
Вот простое объяснение.
Некоторые селекторы будут переопределять существующие, например,
p {
color: green;
}
.Paragraphs {
color: yellow;
}
#paragraph2 {
color: red;
}<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>