Как вы определяете, что отличает ваш стиль?

Когда вы возитесь со стилями образца кода, я считаю, что код имеет стили, которые переопределяют мой стиль, потому что они будут использовать ссылку с более высоким приоритетом (например: .div .class > .class).

Я столкнусь с такими ситуациями:

Как узнать, какой стиль переопределяет мой стиль? Я хочу избежать использования !important, потому что в конечном итоге я окажусь в той же ситуации.

EDIT: Я не спрашиваю, почему это происходит. Я уже знаю о приоритете, поэтому я упомянул, что .div .class имеет более высокий приоритет, чем .class. Я хочу проследить, что на самом деле используется вместо того, чтобы просто сказать мне, что он "неактивен". Кроме того, я уже знаю о Chrome Developer, потому что снятие экрана происходит из Chrome Developer.

РЕДАКТИРОВАТЬ: актуальная проблема исправлена, но вопрос все еще остается... есть ли более простой способ увидеть, что вызывает переопределение?

Исправление: мне просто нужен селектор в правильном порядке. .box сначала, затем .box-blue.

Ответ 1

В devtools, в инспекторе стиля, выберите Computed. Найдите интересующую вас недвижимость и нажмите на нее. Вы увидите список всех правил, применяемых к этому свойству, с активным вверху и каждый с ссылкой на файл/строку, где он определен.

Рассмотрим следующий HTML:

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

Вы увидите следующее:

Ответ 2

Вы можете прокручивать вверх или вниз вкладку стилей в 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, тогда это может быть возможно переопределение предыдущего стиля.

Ответ 3

Существует расширение браузера, помогающее в этом. Я использую "Веб-разработчик" в Firefox, но есть много других.

В Chrome также есть средство просмотрa > Разработчик > Инструменты разработчика.

Если вы наведите указатель мыши на элемент на экране, он расскажет вам свой путь (html > body > div.blah > span.foo) и какие стили CSS были применены к этому элементу.

Ответ 4

Нет никакого окончательного способа сделать вывод о том, какой селектор переопределяет данный стиль (насколько я знаю), но интерфейс инструментов разработчика достаточно интуитивно понятен, чтобы нормально его выполнять.

Проигрывает ваш стиль с ударом. Чтобы узнать, какой селектор переопределяет его, найдите неровную версию того же правила.

Иногда это так же просто, как видеть:

~~color: red;удаp >~~

И нужно искать селектор с:

color: blue;

Инструменты Chrome dev фактически сортируют селекторы по приоритету, поэтому, если вы найдете переопределенный стиль, вам может быть гарантировано, что переопределение будет в том же селекторе или в одном из них над ним.

Но вы должны помнить, что некоторые правила состоят из других, а вы не всегда найдете соответствующее правило с тем же именем. В вашем примере ваше правило border-color переопределяется правилом border из указанного выше селектора. Правило границы является сокращением для указания border-width, border-style и border-color.

Ответ 5

На вашем изображении вы можете увидеть, что правило .box-blue class border-color: #bce8f1 было переопределено border: 1px solid transparent (я не вижу селектор). Вы можете видеть файлы CSS переопределенных правил CSS правой стороны селекторов в инструменте "Проверка".

Иногда правила CSS могут быть изменены JavaScript. Это может быть показано как встроенный CSS.

Ответ 6

В Firefox Developer Tools вы можете найти его в одном клике возле переопределенного свойства в Inspector:

Переопределенные объявления

Начиная с Firefox 43, переопределенные объявления имеют увеличение рядом с ними. Нажмите на увеличительное стекло, чтобы отфильтровать вид правила чтобы показать только правила, применяемые к текущему node, которые пытаются установить то же свойство: то есть полный каскад для данного свойство.

Это позволяет легко увидеть, какое правило переопределяет объявление:

https://www.youtube.com/watch?v=i9mDVjJAGwQ

Вот как это выглядит. Просмотрите видео, чтобы увидеть его в действии.

Ответ 7

Вот простое объяснение.

Некоторые селекторы будут переопределять существующие, например,

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>