特殊性
有的時候我們?yōu)橥粋€元素設置了不同的CSS樣式代碼,那么元素會啟用哪一個CSS樣式呢?
我們來看一下面的代碼:
<style type="text/css">
p{
color:red;
}
.first{
color:green;
}
</style>
<p class="first">這是第一個段落</p>
在樣式中p和.first都匹配到了p這個標簽上,那么會顯示哪種顏色呢?
green是正確的顏色,那么為什么呢?
是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
那接下來講解權值的規(guī)則:
標簽的權值為:1;
類的權值為:10;
ID的權值為最高:100;
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
重要性
有時某個聲明可能非常重要,超過了其他聲明。CSS2.1稱之為重要聲明,并允許在這些聲明的結束分號之前插入!important來標示。
<style type="text/css">
p{
color:red!important;
}
p{
color:green;
}
</style>
<p class="first">這是第一個段落</p>
這時p段落中的文本會顯示的red紅色。
繼承
特殊性對于理解如何向文檔應用聲明很重要,同樣還有個很重要的概念就是繼承,基于繼承機制,樣式不僅應用到指定的元素,還會應用到其后代元素。
<script type="text/css">
p{
color:red;
}
</script>
<p>這是一個<span>悲傷地故事</span></p>
這里span是p的子元素。那么p的顏色改變那么其span的顏色也會相應改變;
注:有些CSS樣式是不具有繼承性的。例如border;
<script type="text/css">
p{
border:1px solid red
}
</script>
<p>這是一個<span>悲傷地故事</span></p>
在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線,而對于子元素span是沒用起到作用的。一般的,大多數框模型屬性(包括外邊距、內邊距、背景和邊框)都不能繼承。
層疊性
<script type="text/css">
p{
color:red;
}
p{
color:green;
}
</script>
<p class="first">這是一個<span>悲傷的故事</span></p>
最后 p中的文本會設置為green,這個層疊很好理解,理解為后面的樣式會覆蓋前面的樣式。
所以css樣式優(yōu)先級就不難理解了:
內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)。
免費學習課堂
推薦文章
Web前端筆記之CSS結構和層疊
來源:北京匯仁智杰科技有限公司 時間:2016-04-13 點擊: 次
推薦文章
- 織夢dedecms漏洞修復大全含任意文件2016-09-05
- 整頓微信公眾號過度營銷 對嚴重違2016-01-26
- SEO優(yōu)化過程要避免什么?2016-01-26
- 網站空間被掛馬的原因原因及解決2016-01-26
- 2016企業(yè)該如何運用互聯網進行營銷2016-01-26
- WEB前端項目開發(fā)中需注意的細節(jié)2016-01-26
- 低價網站建設的危害有哪些?2016-01-15
- 如何詳細的分析你網站的競爭對手2015-06-10
- 網站設計中四個常犯的錯誤2015-01-22
- 如何搭配網站設計中的色彩?2015-01-22