Html 针对特定p标记的css

早些时候我问了一个类似的问题，但我找到了一个更好的表达方式。因此，给定一个html文档，它有多个div id，每个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标记？

您可以使用第n个类型选择器选择第二个p元素

通过在选择器中使用测试，您只针对测试元素内部的元素。所以，你不必担心其他地方的p元素

测试p:nth类型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为目标。

尝试

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

如果以ID为目标，则使用“.”如果以类为目标。

您可以使用typen css属性的第n个。这里n是从1…n开始的int值

您的问题的解决方案：

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

代码笔演示：

---

有关更多信息，请参阅。例如，您可以通过调用div id和要更改的p标记内的第n个子项，以特定的p标记为目标

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

---

将调用测试中的第三个p标记。

这也是我想做的，但我的作业说明我无法更改html文件：\n这不起作用，请使用p:nth-child3，否则将选择第一个p现在这也不起作用，您需要在测试和：nth…之间留出一个空格。。。。看到没有，你通过增加空间修复了它，尝试删除p，它仍然可以工作。而且，看起来这个选择器选择了第三个p元素，但事实并非如此，它只是选择了第三个子元素。这令人困惑。检查你，先生，你是个天才。多谢各位