在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来创建斑马线效果,使内容更易于读取。