[分享]css前3个div的样式

在CSS中，我们常常需要对网页元素进行样式的调整，其中div是最常见的元素之一，下面就为大家介绍一下如何对前3个div元素进行样式调整。div:nthchild(1){ backgroundcolor...

在CSS中，我们常常需要对网页元素进行样式的调整，其中div是最常见的元素之一，下面就为大家介绍一下如何对前3个div元素进行样式调整。

div:nth-child(1){
    background-color: red;
    color: white;
    font-size: 20px;
    padding: 10px;
}
div:nth-child(2){
    background-color: blue;
    color: white;
    font-size: 25px;
    padding: 20px;
}
div:nth-child(3){
    background-color: green;
    color: white;
    font-size: 30px;
    padding: 30px;
} 

以上代码中用的是CSS3中的伪类选择器:nth-child，它能够选中某个父元素下的某个子元素，而我们在这里选择的是第1个、第2个和第3个div元素。接下来的样式代码中我们为这3个元素设置了不同的背景颜色、文字颜色、字体大小和内边距等样式属性。

你可以根据需要灵活应用上述样式代码进行元素样式调整，不仅仅是针对前3个div元素，其它元素也同样适用。当然，如果你对CSS还不是很熟悉，也可以通过这个例子来加强自己的CSS知识储备。