Question

目前我有以下可用代码片段需要设置样式：

<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">     
    <p>summary</p>
    <p>body</p>
</div>

我希望保持HTML原样，并为＆＃39; p＆＃39;摘要和身体以不同的方式。

这可能吗？怎么样？谢谢！

Answer 1

您需要使用：nth-child（）cssSelector为每个标记应用不同的样式。请看下面的例子。

div p:nth-child(1){
   color:red;
 }

div p:nth-child(2){
   color:green;
 }

Answer 2

是的，是：

＆＃13;

div p:nth-child(1){
  color: red;
}

div p:nth-child(2){
  color: blue;
}

＆＃13;

<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">     
    <p>summary</p>
    <p>body</p>
</div>

＆＃13;

Answer 3

你可以这样做：

<p style="background-color:#000000;"></p>

或者这样做：首先，添加＆＃34; id＆＃34;标记在你的段落中。

<p id="bodyParagraph"></p>

其次，在head标签上包括：

<style>
    #bodyParagraph{
        background-color:#000000;
    }
</style>

Answer 4

为什么不想在摘要段落中添加特定的类，而在body段落中添加另一个类？没有错。 <p class="summary">和<p class="body">及其各自的造型。

如果确实想要避免为每个使用特定的类，我建议检查：first-child和nth-child伪元素，所以你设置第一段的样式特别是div单向和任何其他段落不同的方式。

假设正文段落可能是多个段落，我强烈建议不要使用这种方法，因为它只会让每个段落都有自己的风格，因为它会比较简单，更容易混淆，而且更耗时。

<强>来源：

W3Schools - first-child pseudo-element和W3Schools - nth-child pseudo-element

同一DIV中每个段落的CSS样式不同

4 个答案: