邪罗刹的菠萝阁

> 最近小邪有点忙，因为在努力学习英语中。嘿嘿，刚才顺便剥了个蛮粗糙的 Discuz 皮肤练练手。
> O(∩_∩)O，谁能告诉我，我的 灵魂独奏曲 - Soulsolo.Org 应该拿来做啥站点好哩？

> ╮(╯▽╰)╭，音乐站没那个资源，相册的话还是做在菠萝阁比较好，真令人纠结啊。
> 话说这篇文章主要是关于CSS执行的优先级的一点心得，以及无法处理优先级时候的替代方案。

1. CSS 优先级公认的五大原则：

> 话说CSS优先级，是指CSS样式代码在浏览器中被解析的先后顺序。
> 如果遇到针对同一个元素需要实现相同性质不同参数的代码，这就显得很重要了。
> 主要是这次在剥皮的时候遇到默认模板的 CSS 优先级比我建立的模板的 CSS 优先级要高的问题。

> 原则一 - 继承不如指定。
> 原则二 - #ID > .class > 标签选择符。
> 原则三 - 越具体越强大。
> 原则四 - 标签#id >#id ; 标签.class > .class。
> 原则五 - 原则一 > 原则二 > 原则三 > 原则四。

2. 举一些例子来说明五大原则：

> 原则一 - 继承不如指定。

<style type="text/css">
<!--
 body { color:#000; }
 #test { color:#2299cc; }
-->
</style>
<div id="test">文字的颜色是 #2299cc 兰色。</div>

> 原则二 - #ID > .Class > 标签选择符。

<style type="text/css">
<!--
 div { color:#000; }
 #test { color:#2299cc; }
 .try { color:#ee8811 }
-->
</style>
<div id="test" class="try">文字的颜色是 #2299cc 兰色。</div>

> 原则三 - 越具体越强大。

<style type="text/css">
<!--
 #test { color:#ee8811; }
 #test #test1 { color:#2299cc; }
-->
</style>
<div id="test"><div id="test1">文字的颜色是 #2299cc 兰色。</div></div>

> 原则四 - 标签#id > #id 且 标签.class > .class （注意！！标签和#id或者.class之间无空格）。

<style type="text/css">
<!--
 div#test { color:#2299cc; }
 #test { color:#ee8811; }
 div.test1 { color:#2299cc; }
 .test1 { color:#ee8811; }
-->
</style>
<div id="test">文字的颜色是 #2299cc 兰色。</div>
<div class="test1">文字的颜色是 #2299cc 兰色。</div>

> 原则五 - 原则一 > 原则二 > 原则三 > 原则四 （挺住啊，勇士）。

<style type="text/css">
<!--
 #t1 div#test { color:#777; }
 #t1 #test { color:#222; }
 #t1 div.test1 { color:#777; }
 #t1 .test1 { color:#222; } 

 .t2 div#test { color:#eee; }
 .t2 #test { color:#fff; }
 .t2 div.test1 { color:#eee; }
 .t2 .test1 { color:#fff; } 

 div div#test { color:#aaa777; }
 div #test { color:#aaa222; }
 div div.test1 { color:#aaa777; }
 div .test1 { color:#aaa222; }

 #t1 div div#test { color:#323232; }
 #t1 div #test { color:#ee8811; }
 #t1 div div.test1 { color:#323232; }
 #t1 div .test1 { color:#ee8811; } 

 .t2 div div#test { color:#1212; }
 .t2 div #test { color:#2323; }
 .t2 div div.test1 { color:#1212; }
 .t2 div .test1 { color:#2323; }

 div div div#test { color:#eeee11; }
 div div #test { color:#eeee44; }
 div div div.test1 { color:#eeee11; }
 div div .test1 { color:#eeee44; } 

 /* Evlos >> - -+ */

 #t1 div#test p { color:#777; }
 #t1 #test p { color:#222; }
 #t1 div.test1 p { color:#777; }
 #t1 .test1 p { color:#222; } 

 .t2 div#test p { color:#eee; }
 .t2 #test p { color:#fff; }
 .t2 div.test1 p { color:#eee; }
 .t2 .test1 p { color:#fff; } 

 div div#test p { color:#aaa777; }
 div #test p { color:#aaa222; }
 div div.test1 p { color:#aaa777; }
 div .test1 p { color:#aaa222; }

 #t1 div div#test p { color:#2299cc; }
 #t1 div #test p { color:#ee8811; }
 #t1 div div.test1 p { color:#2299cc; }
 #t1 div .test1 p { color:#ee8811; } 

 .t2 div div#test p { color:#1212; }
 .t2 div #test p { color:#2323; }
 .t2 div div.test1 p { color:#1212; }
 .t2 div .test1 p { color:#2323; }

 div div div#test p { color:#eeee11; }
 div div #test p { color:#eeee44; }
 div div div.test1 p { color:#eeee11; }
 div div .test1 p { color:#eeee44; }
-->
</style>
<div id="t1" class="t2">
<div>
<div id="test"><p>文字的颜色是 #2299cc 兰色。</p></div>
<div class="test1"><p>文字的颜色是 #2299cc 兰色。</p></div>
</div>
</div>

> 话说写完这段代码，我几乎要挂了 ╮(╯▽╰)╭，所以看的时候要备上枕头。
> 顺序由原则四至原则一，逐步递进，这样子的顺序理解是比较容易的。
> 其实网上也有人写过例子，不过是论证型的，更让人崩溃。
> 这里如果看不懂可以用赋予权重的方法进行计算即可，权重根据大于小于设定。

3. 覆盖法（带图片的元素）：

<style type="text/css">
<!--
 body { background:#e7e7e7; }
 #t1 { background:url(1.png); width:32px; height:32px; }
 #t1 a { background:url(2.png); width:32px; height:32px; }
-->
</style>
<div id="t1"><a href="http://www.evlos.org">邪罗刹的菠萝阁</a></div>

> 假设 #t1 这行代码处于一个不可以修改的文件中时，第三行只好这样写，链接的背景就被覆盖为 2.Png 了。

4. 覆盖法（文字 DIV）：

<style type="text/css">
<!--
 body { background:#e7e7e7; }
 #t1 { height:20px; }
 #t2 { position:relative; bottom:20px; background:#e7e7e7; }
-->
</style>
<div id="t1">Hello World !</div>
<div id="t2">Hello 7ucking G.F.W. !</div>

> 相对定位移动 t2 到 t1 上方，并设置背景色，如果需要的话还要设置行高、行宽之类的，就OK了。

5. 刚才剥下来的皮（蛮粗糙的，不敢放顶部了，哈哈）：

6. 欢迎来 Follow 我的 Twitter @AngelSolo 。