Как мне раскрасить несколько строк текста под конкретным абзацем в CSS?

Question

Я пытаюсь установить цвет абзацев без использования выделенных элементов div для стилизации абзаца.Может ли кто-нибудь помочь решить мою проблему с цветами абзаца?

По сути, я хочу использовать комбинации или дочерние сектора в CSS, если это возможно, чтобы несколько строк абзаца были цветом в соответствии с принадлежностью к заголовкам, например, в разделе h3.в заголовках отображаются только синие абзацы, а в заголовках h4 - только красные.

h3 {
  color: lime;
}

h3 ~ p {
  color: blue;
}

h4 {
  color: Orange;
}

h4 ~ p {
  color: red;
}

<h3>Heading 1</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

<h4>Heading 2</h4>
<p>This section of the paragraphs only to be shown as red...</p>
<p>This section of the paragraphs only to be shown as red...</p>

<h3>Heading 1 (Again)</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

Answer 1

Я нашел очень элегантное и простое решение, которое будет полезно для меня в будущем.Он использует jQuery, вы можете выполнить его в нативном JavaScript, но функция jQuery делает его очень простым.

$("h3").nextUntil("h4").css({
  "color": "blue"
});
$("h4").nextUntil("h3").css({
  "color": "red"
});

h3 {
  color: lime;
}

h4 {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

<h4>Heading 2</h4>
<p>This section of the paragraphs only to be shown as red...</p>
<p>This section of the paragraphs only to be shown as red...</p>

<h3>Heading 1 (Again)</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

Answer 2

Вы можете использовать селектор + вместо ~, поэтому вы можете выбрать только нужную p и избежать проблем со спецификой / порядком:

h3 + p,
h3 + p + p{
    color: blue;
}

h4 + p,
h4 + p + p{
    color: red;
}

<h3>Heading 1</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

<h4>Heading 2</h4>
<p>This section of the paragraphs only to be shown as red...</p>
<p>This section of the paragraphs only to be shown as red...</p>

<h3>Heading 1 (Again)</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

Или вы можете рассмотреть более сложный селектор, используя ~, если число p не определено (порядок CSS важенздесь)

h3 ~ p{ /*target the first ones*/
    color: blue;
}

h4 ~ p{ /*target the next ones*/
    color: Orange;
}

h4 ~ h3 ~ p { /*target the last ones*/
    color: red;
}

<h3>Heading 1</h3>
<p>This section of the paragraphs only to be shown as blue...</p>
<p>This section of the paragraphs only to be shown as blue...</p>

<h4>Heading 2</h4>
<p>This section of the paragraphs only to be shown as orange...</p>
<p>This section of the paragraphs only to be shown as orange...</p>
<p>This section of the paragraphs only to be shown as orange...</p>
<p>This section of the paragraphs only to be shown as orange...</p>

<h3>Heading 1 (Again)</h3>
<p>This section of the paragraphs only to be shown as red...</p>
<p>This section of the paragraphs only to be shown as red...</p>
<p>This section of the paragraphs only to be shown as red...</p>