css 格式中id与class共存

PHP文件中有一段:<div class="post-alt blog" id="post-alt">

CSS文件中有一段:
.post-alt {XXXXXX}
.blog {XXXXXX}

问题有两个:1、DIV层定义中有class,id,这样的话最后css格式定义听谁的?
2、CSS中没有"#post-alt{XXX}这个ID格式定义,那么这个DIV中的ID有什么作用?




当代码中出现id跟class的时候...先听id的..后听class的....
但是你的代码中并没有出现id的样式...所以就听class的..但是你的代码还有一点地方比较特别..就是class="post-alt blog"..这样的写法意思就是..它有2个class..如果给一个元素指定2个以上的类..要用空格隔开...

你的CSS是.post-alt 跟.blog凡是出现2个以上的class的..是要分情况的...比如..如果没有重复的定义样式.那么就听所有的集合...如果有重复的...比如
.post-alt{font-size:12px;font-family:arial;}

.blog{font-size:20px;}

最终样式就是{font-size:20px;font-family:arial;}
就听blog的....也就是说...第一个类当中的样式在第2个样式里如果没有..就听第一个样式里的这个属性...而相同的属性则听第2个样式..然后集合这2个的属性..

但是如果指定ID..ID中的有跟class相同的属性..则听ID...

问题2.这个里面它本来就没有定义#post-alt所有...这个里面的DIV的ID就没有定义...你可能郁闷为什么要定义一个ID呢...ID其实不一定要在CSS里才还用...它是表示..一个页面里..唯一的一个元素...一个页面里不能出现2个相同的ID...但是可以出现N个相同的类.....比如..利用JS..结合DOM来获取一个页面里唯一的元素的时候..我们就可以利用ID来获取...如:
var post_alt=document.getElementById("post-alt");
这就表示获取页面里ID为post-alt的元素.也就是你写的这个div,你可以对这个div来执行一些操作..如:
post_alt.style.background="#ff0099";
则..这个层的颜色就变成了洋红色...

参考:
http://zhidao.baidu.com/question/121122095.html?qbl=relate_question_3&word=css%20id%20class
http://www.codefans.net/jscss/code/586.shtml



原文地址:https://www.cnblogs.com/fendou-999/p/3834288.html