Почему стили подключаются не в том порядке?

Question

[zuraavl]

Творятся просто чудеса.
Перешел на sass (не scss) и подключая стили font-awesome через @import в app.css столкнулся с тем, что не могу присваивать ничего тегу i, потому что мол стили font-awesome.css главней и перекрывают все мои изменения. Хотя уже такого просто быть не может.

Пытался подключать через link в index.html - ничего не получается. Ставил выше чем основные и даже ниже. Не представляю в чем проблема

Comments

[dk-web]

zuraavl можете помочь советом? а как вы подключили|установили font-awesome в sass?

[zuraavl]

@ import url(font-awesome.css)

Answer 1

[Станислав]

Есть такое понятие, как вес селектора. Вообще, то, как применяются правила, выглядит примерно так:

Сначала определяется вес селектора.
Потом смотрится, не перебивается ли это !important.
При прочих равных применяются правила, которые расположены в коде последними, тут также учитывается и порядок линкования файлов css.

Исправить ситуацию можно несколькими путями:
1. Попробовать добавить !important.
2. Попробовать увеличить вес селекторов, добавив id.
3. Попробовать уменьшить вес селекторов, которые перебивают нужный код.

Сам развесовка такова (есть по ссылке более подробно):

style="" 1,0,0,0
#id 0,1,0,0
.class 0,0,1,0
[attr=value] 0,0,1,0
LI 0,0,0,1
* 0,0,0,0

Answer 2

[edk55]

Ты что-то упускаешь. Мне сложно ответить без конкретного примера (например твой сайт). Могу посоветовать присвоить тегу i !important стили, которые перебьют стили font-awesome.css. Это самый простой способ. Но если ты хочешь разобраться в проблеме, то нужны примеры.

Comments

[zuraavl]

могу прислать скрины. Только скажи какие и я не знаю чем они могут помочь. Проблема наполовину решилась присвоением стилей не для тега i а для класса .fa но я хочу именно для тега i