Как я могу добавить контент: «NEW» в параграфы 2 и 3, используя только CSS? - PullRequest
Новая
       4

Как я могу добавить контент: «NEW» в параграфы 2 и 3, используя только CSS?

1 голос
/ 19 февраля 2020
  1. помогите мне поставить content = "NEW" с css, но только в параграфах 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>

Ответы [ 3 ]

0 голосов
/ 19 февраля 2020 

#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>
0 голосов
/ 19 февраля 2020

Что вы хотите сделать, это сначала взглянуть на #first-div и развернуть его дочерние элементы, используя оператор прямого потомка (>).

В случае, если вам нужно 2 определенных элемента c, вы можно использовать прямой дочерний оператор вместе с функцией 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";
}
0 голосов
/ 19 февраля 2020

Вы можете выполнить sh, используя непосредственный дочерний селектор, также называемый дочерним комбинатором (>), который будет нацелен только на прямые 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

...