1.命名一个也不要重复!一个也不要!死抠名字!没有重复!
2.<div class="modal-body pic-main xgmm-pic-main"></div>
可以像上面那样写!比如多个10个html文件,却只有一个css文件且没有内嵌的style代码,那么;
同一个div块,有可能复用,却又有可能更改,那么:
在第一个页面中 <div class="modal-body"></div>
在第二个页面中<div class="modal-body pic-main "></div>
在第三个页面中<div class="modal-body pic-main xgmm-pic-main"></div>
css文件中这样写: (按照从上往下的顺序写)
/*这个可以应用到第一个页面中!*/
.modal-body {
样式...这段代码用作第一个页面使用
}
/*第二个页面先应用.modal-body的样式 再应用.pic-main 的样式 若有相同(如margin ,则后面的覆盖前面的!)*/
.pic-main {
样式... 这段代码用作第二个页面使用
}
/*第三个页面先应用.modal-body的样式 再应用.pic-main 的样式 再应用.xgmm-pic-main 的样式 若有相同(如margin ,则后面的覆盖前面的!)*/
.xgmm-pic-main{
样式... 这段代码用作第三个页面使
}
注意: 若后面2,3是基于1.html 修改同一个div块的部分样式(如宽高有稍微调整) ,则2,3可以分别加上 pic-main, xgmm-pic-main 来实现并且不影响其他任何页面的样式!! 若第四个页面 ,没有修改,又想应用第1个页面的样式,那么在html中写<div class="modal-body"></div> 即可!看到第二个页面的样式差不多,又想用第二个页面的样式,那么在html中写<div class="modal-body pic-main "></div> 即可!
结果如图一:
而且:html引入css的优先级是 后面引入的大于前面引入的!
例如: <link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" type="text/css" href="css/public.css"> 若有冲突代码,则后面会覆盖前面的!
这个代码,同时在这两个css文件的最后一行写上,结果如图2.pass-set-fix {
width: 600px;
}
被覆盖!
越上面!优先级越高!横线划去代表无效,
但是,遇到这样的问题!那么怎么办?那么看id class 标签 优先级的计算方法!! 5974与6030...却是5970行在前面