У меня есть 3 тега p
,
<p> hi </p>
<p>hello</P>
<p>bye</P>
Я хочу покрасить второй тег p
в красный цвет, используя только чистый css (без использования javascript).
без использования какого-либо встроенного стиля и класса, как я могу этого добиться?
<p> hi </p>
<p>hello</P>
<p>bye</P>
В дополнение к ответу Джека Башфорда, если вы хотите стилизовать только дочерние элементы с четными/нечетными номерами, вы можете использовать
.p:nth-child(even/odd) {
margin-right: 0;
}
Если вы хотите больше контроля, вы можете использовать эту формулу ан+б
Вы можете прочитать больше здесь
“a” is an integer value
“n” is the literal letter “n”
“+” is an operator and may be either “+” or “-”
“b” is an integer and is required if an operator is included in the formula
Например, 4n нацелен только на число, кратное 4.
.p:nth-child(4n) {
margin-right: 0;
}
лучше использовать
:nth-of-type
, так как он спрашивает о втором тегеp