Привет ПРО!
в задании задача - победить
style
#keks-vs-rudolf .to-keksik { /* У Кекса железная хватка */
margin-left: -120px; }
/style
тот который размещен в head
“CSS-правила, которые прописаны в style обладают наивысшим приоритетом.”
правильным ответом является в .css
#keks-vs-rudolf .to-rudolf {
margin-left: 120px;
}
Как так то?
при одинаковой специфичности (id+class), побеждает .css, а не style из head, который имеет наивысший приоритет?
Имеется в виду атрибут style, а не тег.
Например, <div style="background-color: red;"> - здесь наивысший приоритет.
Происходит это из-за особенностей минибраузера курса.
При “правильном” ответе специфичность селекторов становится одинаковой,
но срабатывает #keks-vs-rudolf .to-rudolf потому, что обрабатывается последним.
<!DOCTYPE html>
<html>
<head>
<title>Битва за курочку. Борьба накаляется</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">
<style>
#keks-vs-rudolf .to-keksik { /* У Кекса железная хватка */
margin-left: -120px;
}
</style>
<style type="text/css">
/* Усильте селектор этого правила, чтобы вырвать курочку */
#keks-vs-rudolf .to-rudolf {
margin-left: 120px;
}
</style>
</head>
<body>
<h1>Кому достанется курочка?</h1>
<div id="keks-vs-rudolf" class="battle">
<div class="cat cat-keksik">Кексик</div>
<div class="cat cat-rudolf">Рудольф</div>
<div class="chicken to-keksik to-rudolf"></div>
</div>
</body>
</html>
Чтобы действительно сделать Рудольфа сильнее Кекса – правило нужно усиливать ещё.
Например так: #keks-vs-rudolf div.to-rudolf.
то есть
тег style /style в head
и
стили в файле .css
имеют одинаковый приоритет?
какой тогда из них обработается последним?,
ведь они размещены в разных файлах… кто из них последний?
upd.:
перечитал несколько уроков,
вроде бы как да - тег style /style в head не имеет приоритета над .css → .css обрабатывается позже тега style /style (.css последним)
атрибут style - самый приоритетный (над .css и тегом style).
Спасибо что напомнили об этом!
правильный ответ все таки #keks-vs-rudolf to-rudolf.
в курсе разбросаны обрывки информации,
есть ли четко сформулированные правила в платной части курсов ? или там такой же беспорядок?
спасибо! наиболее подходящее объяснение для этой ситуации.
да, именно так я и сделал изначально, но естественно мой ответ не защитан как правильный.
и это запутывает.
Проверьте ещё раз – у меня ответ принимается верным.
ага, спасибо!
приняло, видимо проблема была в браузере.
но с учетом того что .css обрабатывается последним div - лишний код
уже вроде бы разобрался в приоритетности обработки стилей
в порядке возрастания приоритетности
тег style /style в head
файл .css
атрибут style=
или снова что-то не так?
Нет, div не лишний.
Если бы я весь код писал вручную – в head link поставил бы выше style, и без div Рудольф бы проиграл битву…
ого, оказывается это тоже учитывается!
спасибо!
и очень странно что это не объясняется в курсе…