Question

我想要一个包含两个不同颜色“段落”的盒子。我写道：

    <div>
    <p>Red</p>
    <p>Green<p>
    </div>

和css：

    div{
    color:red;
    background-color : grey;
    height : 50px;
    width : 50px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    vertical-align: middle;
    border : solid black 3px;
    font-size : 30px;
    border-radius : 15px;
    }

div：nth-child（2）{ 颜色：绿 }`

它不起作用：div中的所有内容都是红色的。我该怎么办？

Answer 1

这样做p:nth-child(2) { color:green }

＆＃13;

 div{
    color:red;
    background-color : grey;
    height : 50px;
    width : 50px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    vertical-align: middle;
    border : solid black 3px;
    font-size : 30px;
    border-radius : 15px;
    }
div p:nth-child(2) { color:green }

＆＃13;

<div>
    <p>Red</p>
    <p>Green<p>
    </div>

＆＃13;

Answer 2

你也可以这样做：

在你的css中创建两个类，一个叫做Red，另一个叫做Green

.green{
    color: green;
}
 .red{
    color: red;
}

然后在你的HTML中，你只需通过添加类似

的内容来调用该类

<p class="green"></p>
<p class="red"></p>

Answer 3

简单方式 做你想做的就是把它放到另一个div中

<强> HTML

<div class="clase">
  <div class="subclase">
    <p>Red</p>
  </div>
  <p>Green<p>
</div>

然后将css属性分配给subclase或其中的<p>。

要为<p> subclase内的<p>提供一些不同的属性，而不是任何其他div p {[PROPERTY HERE];} /*this will apply to Red and Green.*/ subclase p {ANOTHER PROPERTY;} /*this line would override any property only for Red*/ div，您可以将它写在您的css中this (check the link)：

<强> CSS

{{1}}

Answer 4

我会给你的父div一个id，然后相应地输入css。

HTML：

<div id="parent-div">
    <p>Red</p>
    <p>Green<p>
</div>

CSS（“div”未更改）：

div {
    color:red;
    background-color : grey;
    height : 50px;
    width : 50px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    vertical-align: middle;
    border : solid black 3px;
    font-size : 30px;
    border-radius : 15px;
}

#parent-div p {
    color: green;
}

html / css：如何在</p> <div>中使<p>具有不同的属性

4 个答案: