1

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

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

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

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

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

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

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

український веб-довідник - css.in.ua
Подякували: 221VOLT, ostap34PHP2

2

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

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

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

3 Востаннє редагувалося NagarD (07.07.2017 21:24:57)

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;
}
український веб-довідник - css.in.ua
Подякували: Monolith, 221VOLT, ostap34PHP3