有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件
1.首先我们先看一段代码.css,如下:
@charset "utf-8";
/* CSS Document */ /*招生广告*/ .ad_stu {
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 5px;
float: left;
} /*广告2*/
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px;
} /*房地产广告*/
.ad_house {
background: #7CF574;
height: 196px;
width: 152px;
float: left;
margin: 5px 0 0 6px;
}
不能发现.ad_stu 、.ad_2 和.ad_house 包含很多修饰部分是相同的,这样写感觉很浪费,很不简洁,难道不可以把他们相同的部分统筹到一起吗?
答案当然是肯定的
2.解决方案如下:
@charset "utf-8";
/* CSS Document */ /*招生广告*/ .ad_stu {
width: 136px;
background-color: #FC7E8C;
margin: 5px 0 0 5px;
} /*广告2*/
.ad_2 {
background: #7CF574;
width: 457px;
margin: 5px 0 0 6px;
} /*房地产广告*/
.ad_house {
background: #7CF574;
width: 152px;
margin: 5px 0 0 6px;
} /*共同的部分*/
.ad_stu, .ad_2, .ad_house {
height: 196px;
float: left;
}