如何解决如何设置段落样式
我的 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>
解决方法
只需创建一个标准类,然后为您想要的更改创建微类:
<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”替换“.p-class”
请记住,这将影响所有“p”元素。
我知道这些不是好的类命名约定。
一般来说,如果每个 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。