ВОПРОСЫ НА СОБЕСЕДОВАНИИ #3
Maksym Pohribniak
На всех собеседованиях и в тестах на знание Frontend проверяется знание каскада CSS. Сегодня разберем несколько моментов в которых часто допускают ошибки:
🔻 Задание #1
При таком CSS:
.red { color: red; }
.green { color: green; }
Каким цветом будут эти дивы?
<div class="green red">text 1</div>
<div class="red green">text 2</div>
💬 Пояснение:
Из правил с одинаковой специфичностью применяется последнее в CSS-коде, порядок классов в HTML на это никак не влияет.
✅ Ответ: — оба дива зеленые.
🔻 Задание #2
При таком CSS:
.inner { color: green; }
div.outer { color: red; }
Каким цветом будет текст в span?
<div class="outer">
Outer
<span class="inner">
Inner
</span>
</div>
💬 Пояснение:
Здесь обычно начинают считать вес селекторов.
Вес .inner - 0.0.1.0, а div.outer - 0.0.1.1, да он еще и ниже записан.
Но вес имеет значение только в том случае, когда мы применяем стили к одному и тому же элементу. В коде выше мы применяем его к разным элементам — к родителю и ребенку (дочернему). Если у элемента определено собственное свойство (color в нашем случае), то оно не наследуется от родителя вне зависимости от веса.
✅ Ответ: цвет span — зеленый.
🔻 Задание #3
При таком CSS:
div { color: red; }
.element { color: green; }
Каким будет цвет текста в div, а каким в p?
(uppercase здесь не просто так)
<DIV class="ELEMENT">
DIV TEXT
</DIV>
<P class="ELEMENT">
P TEXT
</P>
💬 Пояснение:
Все таблицы стилей CSS не чувствительны к регистру, за исключением частей, которые не контролируются CSS. Например, чувствительность к регистру значений атрибутов HTML «id» и «class», имен шрифтов и URI выходит за рамки данной спецификации.
✅ Ответ: div будет красный а p чёрный (дефолтный).
Два предыдущих поста про вопросы на собеседовании: