当先锋百科网

首页 1 2 3 4 5 6 7

在CSS中,复合样式是将多个样式属性组合在一起,以简化代码且更便于维护。以下是如何使用CSS复合样式的几个例子,以及如何使用“:nth-child()”伪类来对一组元素应用不同的样式。

/* 使用CSS复合样式设置多个属性 */
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
line-height: 1.4;
}
/* 使用“:nth-child()”来对一组元素应用不同的样式 */
p:nth-child(even) {
background-color: #f3f3f3;
}
p:nth-child(odd) {
background-color: #ddd;
}

在第一个示例中,我们将“font-family”、“font-size”、“color”和“line-height”属性组合在一起并应用于所有“p”标记。这将产生一个默认样式,以便我们可以在整个网站中使用。

在第二个示例中,我们使用“nth-child()”伪类来区分每个“p”元素的顺序。偶数元素的背景色为灰色,奇数元素的背景色为淡灰色。这个例子显示了如何使用CSS来创建斑马线效果,使内容更易于读取。