Взломанный котопрофайл (2 !important) 100%

Всем привет! Юзал только табличку специфичности. Всем, кто проходит это испытание впервые, рекомендую не пытаться охватить глазами весь код - я так завис минут на 20. Решайте задачу блоками. Понимание специфичности приходит по мере каждого блока.

Сам код:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2, #info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile div .fact {
padding: 10px;
background: white;
}

.profile div .fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.profile .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.profile .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img, #miska {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.profile .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}
.profile
.stroke {
background: #3498db;
}
.profile
.feed {
background: #2ecc71;
}
.profile
.startle {
background: #e74c3c;
}

2 лайка

Примерно так-же, но усилил в двух местах вот так:

.profile .info .fact {
padding: 10px;
background: white;
}

.info .fact:nth-child(odd) {
background: #ecf0f1;
}

Подскажите, пожалуйста, а за что отвечает этот кусок? Не могу понять…

.fact::after {
content: “”;
display: table;
clear: both;
}

псевдоэлемент-распорка, будет разбираться чуть позже, в курсе Сетки. Нужен для того, чтобы элементы со свойством float, не “выпадали” из родителя, а аккуратно растягивали фон (при записи .fact::after элемент с классом .fact как раз таким родителем является)

Только что тоже выполнил эту задачу, но не обошлось без “подглядывания”. Про important догадался сам, а вот там где .albums img, #miska я пытался написать что то вроде div.albums img:nth-child(2), но не сработало((( так и не понял почему. Еще для меня было открытием что перед решеткой # ставится запятая.

Что касается запятой, то селекторы можно так писать, чтобы не дублировать правила. İmg:nth-child(2) не сработал, потому что селектор псевдокласса имеет меньший уровень специфичности, чем идентификатор.

Спасибо

Здравствуйте. Очень часто вижу Ваши ответы на форуме, поэтому, если Вам будет не сложно, не могли бы Вы мне объяснить один вопрос по этой же теме, так как новую создавать не хочется. А именно эта часть кода:

.info h2, #info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

Не могу понять, почему здесь нужно задавать !important’ы, а именно, почему без них не работает только для блока “Альбомы”? Заранее спасибо за ответ.

Для заголовка “Альбомы” в html-коде есть стили, прописанные в атрибуте style. Чтобы их переопределить, используется !important.
Почитайте эту тему еще: Подскажите 18/18

Большое спасибо, не видел эту тему.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2,#info-title {
margin: 0!important;
padding: 10px!important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile div .fact {
padding: 10px;
background: white;
}

div.fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

div.fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img, #miska {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

span.button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle {
background: #e74c3c;
}

Дало 100%