Задать вопрос
swibong
@swibong
No system is safe.
css

Как вычислить приоритет каскадности и почему происходит именно так?

Приветствую.

<body>
    <div class="article">
      <p>Some text is going right here</p>
      <p>Another text at the same place</p>
    </div>
  </body>

p {
  color: green;
}

.article {
  color: red;
}


Почему текст всегда зелёный?

Я нашёл в книге таблицу, где сказано:
  • Селектор тегов имеет значимость 1 пункт.
  • Селектор классов - 10 пунктов
  • ID-селектор 100 пунктов
  • Встроенный стиль - 1000 пунктов


Почему преобладают стили селектора тега - p (1 пункт), в то время, как второй селектор класса .acticle имеет 10 пунктов?
  • Вопрос задан
  • 324 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@IceJOKER
Web/Android developer
Вроде логично, в одном случае вы применяете стиль непосредственно к какому-то элементу, а в другом случае он просто унаследует от родителя, первый случай логично должен стоять выше.
За несколько лет сайтостроительства ни разу не понадобилось высчитывать приоритет, как-то хватило знаний, что id на горе, класс поднимается на гору, а сам тег внизу горы - все предельно просто
Ответ написан
1 комментарий
1 комментарий
@TheBububo
Приоритет имеет значение если селекторы относятся к одному и тому же элементу дом. А у вас p вложен в .article
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
pm_wanderer
@pm_wanderer
junior-HTML
Присвойте класс article одному из параграфов.
У вас сейчас красный цвет наследуется параграфами но потом переопределяется на зеленый.
Ответ написан
Комментировать
Комментировать
pawlek
@pawlek
на вложеность, это не влияет.

Если вы p присваеваете новый цвет, то цвет .article игнорируется. Поскольку вы задаете цвет всем элементам p в документе
Правильно будет прописать, для тегов p которые находятся в .article
.article p {
  color: red;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Небольшое приложение реакт. Корзина для интернет магазина
26 апр. 2024, в 12:34
5000 руб./за проект
Разработка AR приложения для наложения ресниц (прикреплено ТЗ)
26 апр. 2024, в 12:28
1500 руб./в час
Нужно добавить цель на кнопки
26 апр. 2024, в 12:22
500 руб./за проект
Ещё заказы