html - css 针对特定的 p 标签

Question

我之前问过类似的问题，但我找到了更好的表达方式。因此，给定一个包含多个 div id 的 html 文档，并且每个 div id 中都有几个 p 标签......比如，

<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>

如何在不影响第二个 ID“testingTwo”的第一个 p 标签的情况下专门针对 ID“testing”的第二个 p 标签？

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>