Испытание: взломанный котопрофайл [18/18]

Hierumo · 28.Июнь.2019 05:57:36

смотрите, у вас есть стилевой лист <style>, подключенный к head
он по своему действию аналогичен работе подключенного внешнего стилевого листа style.css

из style мы имеем общий селектор:

.profile .button {
  background: #4dfe15;
}

как увеличить специфичность

.stroke {
  background: #3498db;
}

по сравнению с первым селектором?
нужно добавить родительский класс. тогда их специфичность будет одинакова и вы сможете просто переписать, т.к. стили каскадные - при равной специфичности селектора будет применен тот, что написан позже (из одинаковых свойств блока конечно).

ThomasShelby · 28.Июнь.2019 08:54:41

то есть в этом задании у нас конфлик из-за того, что в документе HTML прописаны те же самые свойства только с большим весом? Поэтому они не работают и мы увеличиваем им вес дописывая еще по одному классу ? Верно понимаю?

А так вообще такой конфликс когда названия класов одинаковые, и что бы применилось определенное правило, нужно увеличивать их вес? так? Прошу прощения за глупые вопросы) Просто когда один и тот же класс я понимаю для чего увеличивать вес селектора, а тут запутался)

Hierumo · 28.Июнь.2019 09:15:57

да, все верно.
конфликт возникает в том числе из-за того, что внутренний стилевой лист преобладает над внешним (тот, который вы можете править) при равной специфичности селекторов (т.е. во внешнем стилевом листе вы не можете переопределить свойства, просто используя тот же селектор что и во внутреннем - нужно увеличить специфичность).
учтите, что в одном месте там прям на самом элементе стоит атрибут style. он обладает максимальной специфичностью и перебить в CSS вы его сможете только с помощью !important (2 свойства).

ThomasShelby · 28.Июнь.2019 09:21:15

можно еще кое что спросить?

Hierumo · 28.Июнь.2019 09:21:23

конечно

ThomasShelby · 28.Июнь.2019 09:34:24

.qwert {

color: white;

}

.qwert2 {

color: black;

}

Сработают оба правила, потому что названия классов разные?

<p class=“qwert qwert2”> какой то текст </p>

.qwert {

color: white;

}

.qwert2 {

color: black;

}

сработает тот, что ниже по коду, потому что и один и второй П один из этих класов?

<p class=“qwert qwert3”> какой то текст </p>

<p class=“qwert qwert4”> какой то текст </p>

.qwert3 {

color: white;

}

.qwert4 {

color: black;

}

Сработают оба правила, потому что мы обращаемся к разным классам не смотря на то , что у них есть по одному одинаковому?

Я просто очень запутался в каком случае у нас возникает такой конфликт и нужно увеличивать вес селектора, когда классы одинаковые?

И если конфликт такой и мы увеличиваем вес селектора, второе правило с которым у нас конфликт перестает работать?

Дико извиняюсь за глупости которые спрашиваю, просто все шло как по маслу и тут в ступоре и не могу понять этих вещей)

Hierumo · 28.Июнь.2019 10:06:41

Все нормально, во всех вариантах будет “да”.
Вот вам пример,

<div class="container red">
   <div class="first">первый</div>
   <div class="nya second">второй</div>
   <div class="nya third">третий</div>
</div>

//Css:

.red {
  color: red;
 }
 .nya {
   color: pink;
 }
 .second {
   color: blue;
 }

Какого цвета будут тексты внутри дочерних div’ов?

Дочерние унаследуют красный, но те, что имеют общий класс с розовым цветом, переопределятся розовыми. А тот, что имеет класс с желтым цветом, станет желтым, ввиду того что жёлтый в css описан позже (имя ту же специфичность, что и розовый). Чтобы побаловаться, скопируйте на jsfiddle и поочередно попробуйте убирать классы

З.ы. доберусь до компа, поправлю код

ThomasShelby · 28.Июнь.2019 10:13:52

спасибо)

ThomasShelby · 28.Июнь.2019 10:16:07

вот тут будет как я написал?) или сработают оба

<p class=“qwert qwert2”> какой то текст </p>

.qwert {

color: white;

}

.qwert2 {

color: black;

}

сработает тот, что ниже по коду, потому что и один и второй П один из этих класов?

ThomasShelby · 28.Июнь.2019 10:17:12

последнее уточнение)))

Hierumo · 28.Июнь.2019 10:19:22

Я ж написал, что везде да. Срабатывают они ОБА, но второй переопределяет первого, т.к. описан позже и обращается к тому же свойству.
Если бы 1 ещё и описывал увеличенный шрифт, а второй нет, то шрифт все равно увеличился, т.к. это свойство не переопределяется в таком случае (нечем)

ThomasShelby · 28.Июнь.2019 10:27:42

большое спасибо

force.space · 07.Июль.2019 13:05:34

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

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

.photo .startle {
background: #e74c3c;

Vulver · 17.Октябрь.2019 23:09:58

мой код , 100%
использовал body, не знаю на сколько это честно, но работает
два !important , на <h2 style=“margin-top:-50px;padding:0;”>Альбомы</h2>

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;
}

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

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

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

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

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

.profile .info .albums{
margin-top: 5px;
}

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

.profile 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;
text-decoration: none;
}

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

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

.profile .startle {
background: #e74c3c;
}

Fastmind · 04.Март.2021 15:33:53

100% Немного попарился, но я сумел.

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-title, .info h2 {
margin: 0 !important;
padding: 10px !important;

font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

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

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

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

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

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

.albums {
margin-top: 5px;
}

#miska,.albums img {
width: 64px;
height: 64px;
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;
text-decoration: none;
}

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

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

.photo .startle {
background: #e74c3c;
}