Question

我之前提出了类似的问题，但我发现了一个更好的方法。所以，给定一个html文档有多个div id，每个div id里面有几个p标签.. 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>

如何在不影响第二个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>

Answer 2

对于最简单的方法，你可以给P标签你想要一个新的ID或类来将它分开。

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

然后定位该ID。

Answer 3

尝试

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

如果定位ID，请使用“＃”和“。”如果是一个班级。

Answer 4

您可以使用nth-of-type(n) css属性。这是n值，从1 ... n开始。

解决您的问题：

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

Codepen演示：Demo

有关详细信息，请参阅MDN Documentation

Answer 5

您可以通过调用要更改的p标记内的div id和第n个子项来定位特定的p-tag，例如

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

会在测试中调用第三个p-tag。

css针对特定的p标签

5 个答案: