@therealvetalhidden

Почему так происходит в css?

Вот код:

<style>
       .p {
		color: green;
	}
	.div p {
		color: red;
	}
</style>
<div class="div">
	<p>1</p>
	<p class="p">2</p>
</div>


Я хочу что бы 1 была красная а 2 зеленая, но у меня почему то 1 и 2 красные(
Как правильно написать? И почему так происходит?
  • Вопрос задан
  • 2330 просмотров
Решения вопроса 2
@aassdds
Люблю борщ и PHP
<style>
.p {
	color: green  !important;
}
.div p {
	color: red;
}
</style>


<div class="div">
	<p>1</p>
	<p class="p">2</p>
</div>
Ответ написан
socengel
@socengel
7 лет native php в продакшене, онлайн 20000+,
Я в шоке от местных ответов если честно. куча советов ни одного примера, либо пример который совсем не подходит.
Так сложно написать вот эти 8 строчек?

div.red p{
    color: red;
}
div.red p.green {
    color: green;
}

<div class="red">
   <p>RED</p>
   <p class="green">GREEN</p>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
в случае селектора div p он считается более "весомым" чем просто класс и перебивает стиль. Это нормальное поведение.
По поводу веса/важности селекторов всё расписано на хабре
habrahabr.ru/post/137588
Ответ написан
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
потому что зеленый задается раньше чем красный, и в итоге красный "перебивает" его.
Ответ написан
@therealvetalhidden Автор вопроса
Александр Аксентьев: я тоже так думал) оказывается если стили поменять местами ничего не изменится(
Ответ написан
По вашим принципам получается как-то так.
Но вообще, не надо заниматься подобными глупостями. Лучше сразу делать нормально.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы