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>

如何仅针对第一段或第3段仅更改颜色，字体类型等？

Answer 1

您是否通过编写第3个来改变颜色而不是您需要使用

来表示第三个div

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

所以使用上面的选择器，我选择id为#slideshow2的元素然后选择第三个数字直接子div，最后我选择p元素是一个将孩子指向第三个div

Demo

Answer 2

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

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

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

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

希望这有帮助！

Answer 3

仅限第一个p

p:nth-child(1) { }

第3次

p:nth-child(3) { }

......搞定了吗？

Answer 4

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

然而，如果你想选择第3个div中的第2个p，即使你的问题中没有第2个p。你会做这样的语法：

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

得到它？

在div中定位段落

4 个答案: