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


#83

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

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

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

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

.stroke {
  background: #3498db;
}

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


#84

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

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


#85

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


#86

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


#87

конечно


#88

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

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

.qwert {

color: white;

}

.qwert2 {

color: black;

}

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

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

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

}

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

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

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

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


#89

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

<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 и поочередно попробуйте убирать классы

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


#90

спасибо)


#91

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

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

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

.qwert {

color: white;

}

.qwert2 {

color: black;

}

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


#92

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


#93

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


#94

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


#95

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

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

.photo .startle {
background: #e74c3c;