Как покрасить второй тег p в HTML, не используя стиль и класс?

Question

у меня есть 3 p метки,

<p> hi </p>
<p>hello</P>
<p>bye</P>

Я хочу покрасить 2-й тег p в красный, используя только чистый CSS (без использования JavaScript). без использования какого-либо встроенного стиля и класса, как я могу добиться этого?

<p> hi </p>
<p>hello</P>
<p>bye</P>

Answer 1

Использование :nth-child:

p:nth-child(2) {
  color: red;
}

<p>hi</p>
<p>hello</p>
<p>bye</p>

Однако, как предполагает Хао Ву, лучше использовать :nth-of-type, если вы ищете определенный тег (а не определенный дочерний элемент):

p:nth-of-type(2) {
  color: red;
}

<p>hi</p>
<p>hello</p>
<p>bye</p>

Answer 2

В дополнение к ответу Jack BashFords, если вы хотите стилизовать только четных / нечетных детей, вы можете использовать

.p:nth-child(even/odd) {
  margin-right: 0;
}

Если вы хотите больше контроля, вы можете использовать эту формулу an + b

Вы можете прочитать больше здесь

«а» - целое число

«n» - буквальная буква «n»

«+» является оператором и может быть «+» или «-»

«b» является целым числом и требуется, если оператор включен в формула

Например, 4n, цели только кратны 4.

.p:nth-child(4n) {
      margin-right: 0;
    }