css таргетинг на определенные p-теги

Question

Ранее я задавал аналогичный вопрос, но я нашел лучший способ выразить это. Таким образом, учитывая HTML-документ, который имеет несколько Див идентификаторов, и каждый Див идентификатор с несколькими р тегами внутри it..like,

<div id="testing"> 
    <h2>Hello</h2> 
    <p>this is number one</p> 
    <p> this is number two </p> 
</div> 
<div id="testingTwo"> 
    <h2>hello again! </h2> 
    <p> i just want this one </p> 

Как бы я специально предназначаться вторым р тега ид «тестирование» без пострадавших первый p-тэг второго id 'testingTwo'?

Answer 1

Вы можете использовать селектор nth-of-type, чтобы выбрать второй элемент p.

Используя селектор #testing, вы ориентируетесь только на элементы, находящиеся внутри элемента #testing. Таким образом, вам не нужно беспокоиться об элементах p в другом месте.

#testing p:nth-of-type(2) { 
 
    color: green; 
 
    font-weight: bold; 
 
}

<div id="testing"> 
 
    <h2>Hello</h2> 
 
    <p>this is number one</p> 
 
    <p>this is number two</p> 
 
</div> 
 

 
<div id="testingTwo"> 
 
    <h2>hello again! </h2> 
 
    <p>i just want this one</p>

В качестве альтернативы, вы можете также использовать #testing :nth-child(3) выбрать третий дочерний элемент внутри #testing элемента. Однако это не надежный метод, так как разметка может измениться, и это не сработает.

#testing :nth-child(3) { 
 
    color: red; 
 
}

<div id="testing"> 
 
    <h2>Hello</h2> 
 
    <p>this is number one</p> 
 
    <p>this is number two</p> 
 
</div> 
 

 
<div id="testingTwo"> 
 
    <h2>hello again! </h2> 
 
    <p>i just want this one</p>

Answer 2

Для пожалуй, самый простой метод, вы могли бы дать P тег вы хотите новый идентификатор или класс, чтобы установить его на части.

<div id="testing"> 
    <h2>Hello</h2> 
    <p>this is number one</p> 
    <p id="mytarget"> this is number two </p> 
    </div> 

Затем целевой идентификатор.

Answer 3

Попробуйте

#testing :nth-child(3) { 
    //code 
} 

Используйте '#', если таргетирования идентификатор и '' если класс.

Answer 4

Вы можете использовать nth-of-type(n) css property.Here n - значение int начинается с 1 ... n.

решение для вашей проблемы:

#testing p:nth-of-type(1) { 
    font-size:18px; 
} 

Codepen демо: Demo

См MDN Documentation для получения дополнительной информации

Answer 5

Вы можете нацелить конкретные р-тегов, вызвав Див идентификатор и п-й ребенок внутри тег p, который вы хотите изменить, например

 #testing :nth-child(3) { 
     color: red; 
    } 

будет вызывать третий п-тэг внутри тестирования.