1 Тема від NaharD

  • NaharD
  • NaharD
  • Гарно обсмажений цюріпоп
  • Поза форумом
  • Звідки: Місто Кия
  • Дата реєстрації: 18.11.2016
  • Повідомлень: 405
    • Репутація: 753

Тема: Як зрозуміти таку поведінку CSS

Привіт, ось два приклади

https://codepen.io/MichaelBondar/pen/dRqZNy

https://codepen.io/NaharD/pen/OgoZrr

У першому випадку не працює, не вдається перевизначити властивість background-repeat. В інспекторі вона закреслена.
В в другому все ок.

Я так розумію це якось пов'язано з вагою правила. Але ніяк не можу докумекати як , чому і від чого воно залежить.

Хто знає, поясніть будь ласка.

Подякували: 221VOLT, ostap34PHP2

NaharD вебсайт

2 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як зрозуміти таку поведінку CSS

Дивлячись, де саме Ви хочете перевизначити правила. Чим нижче, тим важче правило. Так само із вкладенням: чим детальніший шлях від батька до нащадка, тим важче правило.

Подякували: NaharD, 221VOLT, ostap34PHP3

3 Відповідь від NaharD Востаннє редагувалося NaharD (07.07.2017 20:24:57)

  • NaharD
  • NaharD
  • Гарно обсмажений цюріпоп
  • Поза форумом
  • Звідки: Місто Кия
  • Дата реєстрації: 18.11.2016
  • Повідомлень: 405
    • Репутація: 753

Re: Як зрозуміти таку поведінку CSS

Дякую, отже, є дів з двома класами. Перший задає, другий перевизначає. Але другий не працює.

Вирішення1
В CSS перший клас розмістити перед другим. Тоді у другого буде більша вага і все запрацює.
Це логічно, тому, що браузер прочитає першим і відповідно застосує другий клас, а після, першим перевизначить другий (а нам треба навпаки)
Ось так

.block {
  width: 500px;
  height: 150px;
  border: 3px solid #808080;
  margin-bottom: 40px;
  background: url(http://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png);
  background-size: 45px 45px;
}

.repeat { background-repeat: repeat; }

.repeat-x { background-repeat: repeat-x; }

.repeat-y { background-repeat: repeat-y; }

.no-repeat { background-repeat: no-repeat; }

Вирішення2
Для другого класу прописати більш детальніший шлях.
Тоді вага у другого класу буде більшою, тому, що перший клас підходить для всіх елементів, а другий тільки для дівів з таким класом і відповідно вага буде більшою. 

div.repeat { background-repeat: repeat; }

div.repeat-x { background-repeat: repeat-x; }

div.repeat-y { background-repeat: repeat-y; }

div.no-repeat { background-repeat: no-repeat; }


.block {
  width: 500px;
  height: 150px;
  border: 3px solid #808080;
  margin-bottom: 40px;
  background: url(http://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png);
  background-size: 45px 45px;
}

Вирішення3
Примусово задати вагу за допомогою important

.repeat { background-repeat: repeat !important; }

.repeat-x { background-repeat: repeat-x !important; }

.repeat-y { background-repeat: repeat-y !important; }

.no-repeat { background-repeat: no-repeat !important; }


.block {
  width: 500px;
  height: 150px;
  border: 3px solid #808080;
  margin-bottom: 40px;
  background: url(http://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png);
  background-size: 45px 45px;
}
Подякували: Monolith, 221VOLT, ostap34PHP3

NaharD вебсайт