CSS не переписывает стиль

Question

У меня есть 2 файла таблиц стилей, style.css и index.css, которые загружаются соответственно

1-style.css 2-index.css

в моем style.css У меня естькод, подобный этому

#mainNav nav > a:hover span:before {
    background-color: transparent !important;
}

#mainNav nav a.darkBlue span:before {
        background-color: #17729a;
}

теперь в моем index.css

, когда я пишу

#mainNav .darkBlue span:before {
background-color: transparent;
}

Это не работает, и я должен написать! важно в конце, чтобы сделатьэто работает

, но когда я пишу порядок селекторов иначе, чем я использовал в своем style.css, он работает без! важным

вот так

#mainNav nav a.darkBlue span:before {
    background-color: transparent;
}

Почему?

Answer 1

У вас есть нечто, называемое спецификой CSS:

https://www.w3schools.com/css/css_specificity.asp

Действительно отличное прочтение о том, что на первом месте и порядок специфичности: проверьте https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ Имейте в виду, этодолгая статья.Большинство людей даже не имеют ни малейшего представления о том, как далеко это зашло.

Проще говоря: если два CSS-селектора применяются к одному и тому же элементу, выигрывает тот, который обладает более высокой специфичностью.

Вот почему я следую методологии BEM , это предотвращает подобные неприятности.

Answer 2

Ваши заявления применяются в зависимости от того, насколько специфичны они.

За MDN - Специфичность :

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

Удельный вес - это вес, который применяется к данному объявлению CSS и определяется номером каждого типа селектора в соответствующем селекторе.

Приведенная выше ссылка также включает факторы, которыеопределить специфичность:

Следующий список типов селекторов увеличивается в зависимости от специфики:

1. Селекторы типов (например, h1) и псевдоэлементы (например,::before).

2. Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассы (например, :hover).

3. Селекторы ID (например, #example).

Универсальный селектор (*), комбинаторы (+, >,~, ' ') и псевдо-класс отрицания (:not()) не влияют на специфичность.(Однако селекторы, объявленные внутри :not(), делают.)

---

CSS выбирает, какие правила применять, основываясь на нескольких условиях.С учетом правил, применимых к одному и тому же элементу, они рассматриваются в следующем порядке:

1.!important

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */
span { color: green !important; }  /* important */

<span id="mySpan" style="color: purple;">Example</span>

2.Встроенные стили

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */

<span id="mySpan" style="color: purple;">Example</span>

3.Специфичность

span { color: red; }               /* base */
#mySpan { color: blue; }           /* specific  */

<span id="mySpan">Example</span>

4.Последний объявленный

span { color: red; }               /* base */
span { color: yellow; }            /* last applied */

<span>Example</span>

---

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

Answer 3

CSS имеет иерархию.Если вы хотите перезаписать некоторые стили, вы должны использовать те же селекторы или некоторые более конкретные.

Пример:

a.selector { color: blue }
.selector { color: red }

Цвет не изменится.

Но

.selector { color: blue }
a.selector { color: red }

изменит цвет на красный, потому что комбинацияTAG и селектор класса вы более конкретны.