如何在一个html里包含两个css，且互不相扰

CSS就是层叠样式。
在同一个HTML文件中调用两个CSS文件，如果两个CSS文件定义的样式定义不同，就不会冲突，即互不相扰，但会相辅相成（网页显示效果是两上文件样式的叠加）比如一个文件定义了某个标签的颜色“白色”，另一个文件里定义了同一个标签的底色“红色”，网页上显示该标签为红底白字。
如果样式定义一样，相互冲突，比如同一个标签在一个文件里定义颜色为蓝色，另一个文件里定义为红色，此时，以文件引用顺序为准，即该标签颜色以后面引用的CSS文件中定义为准。

第一个问题：当你把在不同样式表里的样式合并到一起时，一来是因为dd{}和body dd{}的优先级是不同的，二来是通常是在优先级一样的情况下，写在代码后面的样式覆盖前面同名的样式，所以其他页面会出错，是因为它用的是和让本页面显示正常的那个样式。
建议：另外当dd,dl等要用到不同样式时，单独写另外的类或id。
第二个问题：和前面一样，因为这有一个样式优先级的问题，你之所以换成id的写法就可以了，是因为id要比class的优先级高很多。
建议：你应该学习一样关于样式优先级这部分的内容。

给样式加命名空间。
比如在head里的加head-前缀
head-icon{}
head-main{}
在foot 里的加foot前缀
foot-icon{}
foot-main{}

 方法有很多种，最简单的是一下方式,代码不是最少的，不便于重用，但是你的问题描述就这么多，仅仅解决问题是可以了。

分别在html中给li,ul 加入class比如

<ul clas="ul-1"><li class="li-1"></li></ul>
<ul clas="ul-2"><li class="li-2"></li></ul
     <style>
         ulul-1 {}
         lili-1 {}
         ulul-2 {}
         lili-2 {}
     </style>

粟子：
<style>
test1{width:100px;}
test2{width:200px;}
</style>
<div class="test1 test2">那么这个DIV的宽度是200PX</div>
<div class="test1 test2" style="width:300px;">这个DIV的宽度是300PX</div>
另外一个粟子:
<style>
libg{background:#cccccc;}
ul li{background:#000000;}
</style>
<ul>
<li class="libg">那么这个LI的背景是#CCCCCC灰色，因为它们两的优先级别不一样class的优先级别比LI高，所以会是应用libg</li>
</ul>

一个html可以调用多个CSS样式表的，具体样式的应用是根据你的调用的类ID或者类名来显示的，只要用同时调用的样式表里面没有同名的定义就不会有冲突！希望对你的问题有所帮助，如果还有什么疑问可HI在线咨询，IT精英俱乐部真诚为您解答！

---