CSS правила порядка вопросов

Question

Почему следующий код дает красный цвет, а не черный?

HTML:

<div class="error classA" att="A"></div>

CSS:

div {
    width: 100px;
    height: 100px;
}

[att=A].classA {
    background-color: red;
}

.error {
    background-color: black;
}

ЕслиЯ удаляю [att=A], он становится черным, как и ожидалось.Почему это?

Answer 1

Это из-за Специфика CSS .Правило 'red' более конкретно (элементы, имеющие этот атрибут и этот класс), чем правило 'black' (элементы, имеющие этот класс).Когда вы удаляете [att=A], они имеют ту же специфику, но, поскольку черное правило позже в файле, оно выигрывает.

Answer 2

Поскольку в CSS специфичность учитывается и для «Каскада».

[att=A].classA предназначается для атрибута и имени класса.

.error предназначается только для имени класса

Поскольку первое более конкретно, оно применяется поверх второго.

Если вы хотите принудительно переопределить ранее примененный стиль, вы можете использовать объявление !important:

[att=A].classA {
    background-color: red !important;
}

Однако я должен отметить, что IE игнорирует объявление !important имеет поддержку ошибок , поэтому используйте его с осторожностью.

Answer 3

Победит конкретный селектор большинство , а [att=A].classA более специфичен, чем .error.Без этого выигрывает последний, объявленный в CSS, например:

.error {
    background-color: black;
}
.classA {
    background-color: red;
}

также приведет к red.