@vasIvas

Существует ли порядок присвоения css?

Есть html .container>.rect и есть под него стили
.container
    ...
.rect
    ...

Все работает, но есть один очень важный момент, фраймворк для сеток генерирует схожый код и в конечном результате получается следующее -
.container .rect{...}
.container
    ...
.rect
    ...

И даже так все работало пока я не решил переписать с вложенностью классов, так -
.container
    ...
    .rect
        ...

И в конечном результате получилось так -
.container .rect{...}
.container .rect{...}

И с этого момента верстка слетела. И от сюда вопрос - есть ли поряд выполнени css кода? Вот почему без вложенности классов не переписали сгенерируемый код, а с вложенностью переписали?
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Существует понятие "специфичность селектора". Т.е. его "вес". Стили применяются те, у которых специфичность выше.
Чтобы мне тут не писать много слов, дам ссылку , ну еще погуглить можно.

У вас получается
.container .rect{...}
.container{}
.rect {}

в третьей строке один идентификатор в селекторе - .rect специфичность будет равна 1
в первой строке два идентификатора .container и .rect специфичность будет равна 2
поэтому стили из первой строки перекроют стили из третьей строки

Далее, вы пытаетесь сделать вложенность. Но почему-то упускаете тот момент, что изначально вложенности нет.
у вас есть селекторы
.container{}
.rect{}
после ваших правок они превратятся в
.container{...}
.container .rect{...}
Как мы видим, селектор
.rect{} пропал. а он должен быть.

UPD
Вы писали что на выходе у вас
.container .rect{...}
.container .rect{...}
Вторая строка - это то что было раньше селектором .rect{} специфичность=1
А теперь у него вес вырос, и стал равным =2
В первой строке вес тоже равен =2
Ранее, когда у второй строки вес был равен=1, то стили из первой строки перекрывали стили из второй.
Теперь вес селекторов одинаковый, и применяются те, что ниже по коду.
В результате, не имеем необходимого перекрытия стилей, и все ломается.

С какой целью вы пытаетесь переписать код?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы