我的 HTML 页面中有 4 个帖子,除了文本内容和图像以及文本和背景的颜色外,它们看起来都一样,在下图中您会找到我想要的结果:
我的问题是如何在不为每篇文章创建类 css 的情况下设置每篇文章的样式我只想改变颜色
这是我的代码
.art-content {
position: relative;
}
.art-content img {
width: 100%;
}
.main-content article {
margin-top: 15px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.rect-date-even {
position: absolute;
display: block;
background-color: #c2022a;
width: 75px;
height: 77px;
top: 0;
left: 0;
text-align: center;
padding: 9px 6px 15px 4px;
}
.rect-date-even span {
font-family: 'Quicksand';
font-size: 20px;
color: white;
padding-bottom: -10px;
}
.rect-info-art {
position: relative;
width: 100%;
height: 105px;
background-color: #dcdcdc;
}
.rect-cat {
position: absolute;
width: 120px;
height: 18px;
background-color: #c2022a;
color: white;
font-family: 'Quicksand';
font-size: 12px;
padding-left: 3px;
top: 10px;
left: 25px;
}
.rect-info-art p {
position: absolute;
font-style: italic;
font-size: 18px;
max-height: 10px;
padding-right: 50px;
top: 30px;
left: 25px;
}
.rect-info-art a {
position: absolute;
color: #c2022a;
font-size: 14px;
text-align: center;
top: 70px;
right: 20px;
}
<section class="col-md-8 col-lg-8 main-content">
<div class="title-section-bg">
<img src="assets/img/ombre-title-section.png">
<div></div>
<span class="icon-megaphone"></span>
<h2>Prochainement a Rabat</h2>
</div>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
<a href="">détails <span class="icon-circle-plus"></span></a>
</div>
</article>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
<a href="">détails <span class="icon-circle-plus"></span></a>
</div>
</article>
</section>
感谢帮助
最佳答案
使用 :nth-of-type(n)
伪选择器来单独设置它们的样式。
div {
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(1) p {
background-color: red;
}
div:nth-of-type(2) p {
background-color: blue;
}
div:nth-of-type(3) p {
background-color: yellow;
}
div:nth-of-type(4) p {
background-color: green;
}
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
关于html - 如何在 css 中为每个 html 帖子设置不同的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41262753/