我如何在paragraf 2和paragraf 3中添加带有CSS的内容：“ NEW”

Question

1. 帮助我在CSS中添加content =“ NEW”，但仅在paragraf 2和3中使用。
2. 我不得更改html代码。
3. 如果可能请使用伪类。

<div id="first-div">
  <h2>Subheading</h2>
  <p>Paragraph 2</p> <!-- i need to add content here-->
  <p>Paragraph 3</p> <!--and here -->
  <div id="second-div">
     <h3>Sub subheading</h3>
     <p>Paragraph 4</p>
     <p>Paragraph 5</p>
     <p>Paragraph 6</p>
     <p>Paragraph 7</p>
     <p>Paragraph 8</p>
  </div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

Answer 1

#first-div > p::before {
  content : 'NEW ';
  color   : red;
}

<div id="first-div">
  <h2>Subheading</h2>
  <p>Paragraph 2</p> <!-- i need to add content here-->
  <p>Paragraph 3</p> <!--and here -->
  <div id="second-div">
     <h3>Sub subheading</h3>
     <p>Paragraph 4</p>
     <p>Paragraph 5</p>
     <p>Paragraph 6</p>
     <p>Paragraph 7</p>
     <p>Paragraph 8</p>
  </div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

Answer 2

[您要做的是首先查看#first-div，然后使用直接后代运算符（>）深入研究其子级。

如果需要2个特定元素，则可以将直接子运算符与nth-child函数一起使用。

#first-div > p:nth-child(2):after,
#first-div > p:nth-child(3):after {
  color: red;
  content: "NEW";
}

如果您需要p下的所有#first-div标签，只需选择它们全部

#first-div > p:after {
  color: red;
  content: "NEW";
}

Answer 3

您可以使用直接子选择器（也称为子组合器（>）来完成此操作，该子选择器仅将p的直接#first-div子作为目标。

来自MDN：

子组合器（>）放在两个CSS选择器之间。它仅匹配第二个选择器匹配的那些元素由第一个元素匹配的元素的直接子元素。

#first-div>p::after {
  content: 'NEW';
  color: red;
  padding-left: 10px;
}

<div id="first-div">
  <h2>Subheading</h2>
  <p>Paragraph 2</p> <!-- i need to add content here -->
  <p>Paragraph 3</p> <!--and here -->      
  <div id="second-div">
    <h3>Sub subheading</h3>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
  </div>
</div>
<p>Paragraph 9</p>
<p>Paragraph 10</p>

jsFiddle