在 div 中定位段落

Question

我有这行 HTML 代码：

<div id="slideshow2">
  <div class="active2">
    <img src="noangel.png" alt="Slideshow Image 1" />
    <p class="imgDescription2">NoAngel</p>
  </div>
  <div>
    <img src="anders.png" alt="Slideshow Image 2" />
    <p class="imgDescription2">This is Anders</p>
  </div>
  <div>
    <img src="fayeblais.png" alt="Slideshow Image 3" />
    <p class="imgDescription2">Something about FayeBlais</p>
  </div>
  <div>
    <img src="ronny.png" alt="Slideshow Image 4" />
    <p class="imgDescription2">Ronny Information</p>
  </div>
</div>

如何仅针对第一段或仅针对第三段来更改颜色、字体类型等？

Answer 1

只选择第三个<div>中的第一段：

#slideshow2 > div:nth-of-type(3) > p {
   /* Styles */
}

该选择器选择 ID 为 slideshow2 的元素，然后是第三个 <div> 直接子元素，最后是 <p> 元素，它是该 <div> 的直接子元素。

这是一个演示：

#slideshow2 > div:nth-of-type(3) > p {
  color: red;
}

<div id="slideshow2">
  <div class="active2">
    <img src="noangel.png" alt="Slideshow Image 1" />
    <p class="imgDescription2">NoAngel</p>
  </div>
  <div>
    <img src="anders.png" alt="Slideshow Image 2" />
    <p class="imgDescription2">This is Anders</p>
  </div>
  <div>
    <img src="fayeblais.png" alt="Slideshow Image 3" />
    <p class="imgDescription2">Something about FayeBlais</p>
  </div>
  <div>
    <img src="ronny.png" alt="Slideshow Image 4" />
    <p class="imgDescription2">Ronny Information</p>
  </div>
</div>

View on JSFiddle

Answer 2

首先，选择第三个 div，语法如下： div:nth-of-type(3){ } /* 这意味着您正在选择第三个 div 内的所有内容。 */

但是，如果您希望选择第 3 个 div 的第 2 个 p，即使您的问题中没有第 2 个 p。你会做这样的语法：

div:nth-of-type(3)>p:nth-of-type(2) { }

明白了吗？

Answer 3

尝试使用 nth-child css 选择器。

对于您的情况，请尝试将其定位到 slideshow2 div 中的第 3 段。

#slideshow2 p:nth-child(3) {color:blue; font-size:20px;}

您可以在此处找到更多针对您选择的元素或第 n 个子元素的技巧：http://nthmaster.com/

希望这会有所帮助！

Answer 4

仅适用于第一个 p

p:nth-child(1) { }

第三个

p:nth-child(3) { }

...明白了吗？