Question

我有一个称为index的div类，在里面，还有两个没有类或id名称的div和两个<p>标记。我想为这两个<p>标签应用样式。

<div class="doubt">
  <div>
    <p>Hello world</p>
    <div>
      <p>Hello</p>
    </div>
  </div>
</div>

如何对两个p标签应用不同的样式？

请帮助我，谢谢！

Answer 1

简单只需使用此CSS

让我知道进一步的澄清。

.doubt > div > div > p {
    color: green;
}
.doubt > div > p {
    color: red;
}

<div class="doubt">
    <div>
            <p>Hello world</p>  
        <div>
            <p>Hello</p>
        </div>
    </div>
</div>

Answer 2

您可以使用内联样式。

<div class="doubt">
      <div>
        <p style="color: yellow">Hello world</p>
        <div>
          <p style="color: red">Hello</p>
        </div>
      </div>
</div>

同样，您可以使用样式的层次结构将样式应用于这些段落。

<head>
    <style>
        .doubt div p{
            color: red;
        }
        .doubt div div p{
            color: green;
        }
    </style>
</head>
<body>
    <div class="doubt">
      <div>
        <p>Hello world</p>
        <div>
          <p>Hello</p>
        </div>
      </div>
    </div>
</body>

希望这会对您有所帮助。

Answer 3

您可以为两个p标签应用不同的样式，如下所示：-

.doubt div:nth-child(1) p{ color:green;}
.doubt div:nth-child(2) p{ color:red;}

<div class="doubt">
    <div>
            <p>Hello world</p>  
        <div>
            <p>Hello</p>
        </div>
    </div>
</div>

Answer 4

您还可以使用内联音节。

<div class="doubt">
    <div>
        <p style="color: red">Hello world</p>  
        <div>
            <p style="color: green">Hello</p>
        </div>
    </div>
</div>

需要将CSS应用于<p>标记

4 个答案: