Задать вопрос
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 пунктов?
  • Вопрос задан
  • 325 просмотров
Комментировать
Подписаться 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;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Доделать сайт на Revolution 3
22 нояб. 2024, в 21:44
50000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Ещё заказы