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

Question

[therealvetalhidden]

Вот код:

<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 красные(
Как правильно написать? И почему так происходит?

Answer 1

[Родион Юрченко]

<style>
.p {
	color: green  !important;
}
.div p {
	color: red;
}
</style>


<div class="div">
	<p>1</p>
	<p class="p">2</p>
</div>

Comments

[therealvetalhidden]

спасибо)

Answer 2

[Андрей Галкин]

Я в шоке от местных ответов если честно. куча советов ни одного примера, либо пример который совсем не подходит.
Так сложно написать вот эти 8 строчек?

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

<div class="red">
   <p>RED</p>
   <p class="green">GREEN</p>
</div>

Comments

[therealvetalhidden]

спасибо)

Answer 3

[Фёдор Гребенников]

в случае селектора div p он считается более "весомым" чем просто класс и перебивает стиль. Это нормальное поведение.
По поводу веса/важности селекторов всё расписано на хабре
habrahabr.ru/post/137588

Comments

[therealvetalhidden]

Александр Аксентьев: понял спасибо) а как сделать правильно, не подскажите?

[Фёдор Гребенников]

therealvetalhidden: как лучше - в зависимости от задачи и от окружения.
Два варианта - первый, если надо выделить малое количество пунктов из общего стиля.
Второй - если каждому нужен свой цвет.
jsfiddle.net/zqoL84dz/1

И по поводу наименований классов - лучше не писать так: div class="div"
Потом в коде не разобраться, где селектор по классу .div, а где по элементу div.
Лучше использовать какие-то осмысленные названия.

[therealvetalhidden]

Фёдор Гребенников: спасибо) я называю нормально классы) это я для моей проблемы написал простенький пример кода)

Answer 4

[Александр Аксентьев]

потому что зеленый задается раньше чем красный, и в итоге красный "перебивает" его.

Answer 5

[therealvetalhidden]

Александр Аксентьев: я тоже так думал) оказывается если стили поменять местами ничего не изменится(

Comments

[Александр Аксентьев]

чеи больше вхождений в селекторе тем выше приоритет стиля. Поэтому порядок не играет роли в данном случае.

[therealvetalhidden]

Александр Аксентьев: понял спасибо) а как сделать правильно, не подскажите?

Answer 6

[Владлен Грачев]

По вашим принципам получается как-то так.
Но вообще, не надо заниматься подобными глупостями. Лучше сразу делать нормально.

Comments

[therealvetalhidden]

Влад Гвер: понял спасибо) ну то что вы предложили не совсем подходит для меня, я просто наверно не дописал, но смысл в том что в диве например находится много красных абзацев а нужно сделать один - зеленным)