Как раскрасить второй тег p в html без использования какого-либо стиля и класса?

У меня есть 3 тега p,

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

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

<p> hi </p>
<p>hello</P>
<p>bye</P>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
432
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте :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>

лучше использовать :nth-of-type, так как он спрашивает о втором теге p

Hao Wu 27.05.2019 07:56

В дополнение к ответу Джека Башфорда, если вы хотите стилизовать только дочерние элементы с четными/нечетными номерами, вы можете использовать

.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;
    }

Другие вопросы по теме