css3重叠样式表div

CSS3的重叠样式表可以让我们更快、更方便地设定页面的样式。在HTML中，我们使用div元素来划分页面结构，而在CSS3中，我们就可以使用重叠样式表来给这些div元素设定样式。

div {
    width: 200px;
    height: 200px;
    background-color: #eee;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
}

div[class^="Box"] {
    background-color: #f00;
}

div[class^="Box"][class$="-right"] {
    float: right;
}

div[class^="Box"]:not([class$="-right"]) {
    float: left;
    clear: both;
}

在这个样式表中，我们首先给所有的div元素设定了基本样式，包括宽度、高度、背景色、边框、外边距和内边距。接着，我们使用了CSS3的属性选择器，给所有class属性以Box开头的div元素设定了背景色为红色。

然后，我们又使用了属性选择器，针对以-right结尾的class属性，给div元素设定了float属性为右浮动。这样，我们就可以方便地将这些元素布置在页面的右侧。

最后，我们使用了:not伪类选择器，给所有class属性不以-right结尾的div元素设定了float属性为左浮动，并且清除了浮动。这样，我们就可以将这些元素布置在页面的左侧了。

总的来说，CSS3的重叠样式表为我们提供了更为高效、便捷的页面设计方式，能够减少代码量，提高开发效率。