如何设置段落样式答案

【问题标题】：How to style paragraphs如何设置段落样式
【发布时间】：2021-08-03 02:41:02
【问题描述】：

我的div 中有 5 个段落，我需要为它们设置不同的样式。有没有比给每个段落一个不同的类更简单的方法？

<div class="container-fluid">
        <div class="row">
            <div class="col bg-dark text-white">
                <p class="text">Nikolina Tute 2 Mount Street, Manchester M2 5WQ</p>
                <p class="text-2">#1 in Customer Service in the UK</p>
                <p class="text-3">Free Shipping for Orders over 60$</p>
                <p class="text-4">support@hlfonline.co.uk</p>
                <p class="text-5">07441 430 469</p> 
            </div>
        </div>
    </div>

【问题讨论】：

你会发现使用单独的类是最简单的单独识别div的方法。

标签： css class text styles paragraph

【解决方案1】：

只需制作一个标准类，然后为您想要的更改制作微类：

<p class="p-class"> Some Text </p>
<p class="p-class"> Some Text </p>
<p class="p-class diff-class"> I'm Different!! </p>

.p-class{
background: green;
text-align: center;
font-size: 1rem;
}

.diff-class{
"Some different stuff here"
 }

如果您不想在每个段落中写入类名，则可以将“.p-class”替换为“p”
请记住，这将影响所有“p”元素。
我知道这些不是好的类命名约定。

【讨论】：

【解决方案2】：

一般来说，如果每个P标签需要不同的访问。那么是的，您需要在每个 p 标签上放置一个 ID/Class 选择器。您可以在每个 p 标签上使用一个 ID，也可以在 CSS 中创建某种类型的子类并利用级联效果。

    .base{
        color: green;
    }

    .firstP{
        color:red
    }

    .lastP{
        color: purple;
    }

    <div>
        <p class="base firstP">Some text</p>
        <p class="base">Some text</p>
        <p class="base">Some text</p>
        <p class="base">Some text</p>
        <p class="base lastP">Some text</p>
    </div>

如果您想在 HTML 中使用更清晰的标记，您可以做的另一件事是 nth-child 选择器。这样你的 HTML 就没有一堆类，所有的工作都在 CSS 文件中完成

        #base p{
            color: green;
        }

        #base p:nth-child(1){
            color: red;
        }
    
        #base p:nth-child(5){
            color: purple;
        }

    <div id="base">
        <p >Some text</p>
        <p >Some text</p>
        <p >Some text</p>
        <p >Some text</p>
        <p >Some text</p>
    </div>

【讨论】：