樣式優(yōu)先級(jí)
首先簡(jiǎn)單說(shuō)幾個(gè)定義樣式的方式:
元素內(nèi)嵌：
<li><a href="" style="color:#ffffff;">SHOW</a></li>
??文檔內(nèi)嵌：
<style type="text/css">
/* 內(nèi)部樣式 */
h3 {
color: green;
}
</style>
外部樣式：
<link rel="stylesheet" href="css/style.css">
??上面這些都是題外話兆览，接下來(lái)我來(lái)說(shuō)說(shuō)我遇到的問(wèn)題，先看代碼:
<header class="navbar navbar-default navbar-fixd-top " id="benner">
<div class="container">
<a href="#" class="scrollable">FishShe</a>
<button class="navbar-toggle collapsede">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="">ABOUT</a></li>
<li><a href="">SHOW</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
在這里毕籽，我想要修改bootstrap默認(rèn)a元素的樣式抬闯。最開(kāi)始我是這樣做的，引入我自己寫(xiě)的外部樣式:
<link rel="stylesheet" href="show.css">
/*外部樣式*/
a { color: #ffffff;}
結(jié)果是這樣的关筒，為什么會(huì)這樣溶握，我不是把自己的樣式表放在bootstrap引用的后面了么，為什么沒(méi)有覆蓋bootstrap樣式蒸播。
查了css2規(guī)范之后我才知道是怎么回事睡榆。我們要先來(lái)了解一下css計(jì)算選擇器的特殊性，css2規(guī)范里是這樣描述的：
- 如果聲明來(lái)自一個(gè)'style'屬性而不是一條選擇器樣式規(guī)則袍榆，算1胀屿，否則就是0 (= a)（HTMl中，一個(gè)元素的"style"屬性值是樣式表規(guī)則包雀，這些屬性沒(méi)有選擇器宿崭，所以a=1，b=0才写，c=0葡兑，d=0）
- 計(jì)算選擇器中ID屬性的數(shù)量 (= b)
- 計(jì)算選擇器中其它屬性和偽類的數(shù)量 (= c)
- 計(jì)算選擇器中元素名和偽元素的數(shù)量 (= d)
特殊性只根據(jù)選擇器的形式來(lái)定。特殊的赞草，一個(gè)"[id=p33]"形式的選擇器被算作一個(gè)屬性選擇器(a=0, b=0, c=1, d=0)讹堤，即使id屬性在源文檔的DTD中被定義為"ID"
??4個(gè)數(shù)連起來(lái)a-b-c-d（在一個(gè)基數(shù)很大的數(shù)字系統(tǒng)中（in a number system with a large base））表示特殊性。
一些示例：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
也就是說(shuō)厨疙，abcd相互比較洲守，若a相同則比較b，如此類推沾凄，比如說(shuō)比較到c的時(shí)候梗醇，樣式一比樣式二大，則特殊性（優(yōu)先級(jí)）高撒蟀。舉個(gè)簡(jiǎn)單例子:
<head>
<meta charset="UTF-8">
<title>A Pen by FishShe</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<body>
<div>
<h3>測(cè)試叙谨！</h3>//這里應(yīng)該為綠色
</div>
</body>
</body>
/*style*/
h3 {
color: red;
}
/*style2*/
h3 {
color: green;
}
當(dāng)我把style樣式表中的樣式改為:
div h3 { color: red;}
??這時(shí)h3里的字體為紅色，因?yàn)檫@時(shí)它的權(quán)重為0牙肝，0，0，2比較style2樣式表中的0配椭，0虫溜，0，1股缸，abc相同衡楞，但是d的值比style2的大。說(shuō)到這里敦姻，我不得不提一下瘾境，最開(kāi)始提到的定義樣式的幾個(gè)方式，其實(shí)都是相同的來(lái)源镰惦，即編寫(xiě)者常規(guī)聲明迷守。當(dāng)你為樣式添加！important時(shí)旺入，就是編寫(xiě)者重要聲明兑凿，當(dāng)來(lái)源和重要性相同的時(shí)候就根據(jù)特殊性來(lái)排序。所以我個(gè)人認(rèn)為“文檔內(nèi)嵌的優(yōu)先級(jí)比外部樣式優(yōu)先級(jí)高”這句話是不對(duì)的茵瘾，它們是同一個(gè)來(lái)源礼华；當(dāng)來(lái)源、重要性和選擇器特殊性一樣的時(shí)候拗秘，則是后聲明的生效圣絮，簡(jiǎn)單試一下，就可以知道外部樣式的鏈接在文檔內(nèi)嵌（style結(jié)束標(biāo)簽）后面的話雕旨，生效的是外部樣式扮匠。
現(xiàn)在說(shuō)回使用bootstrap的問(wèn)題，我想要使用自己的樣式改變bootstrap中a標(biāo)簽的默認(rèn)樣式奸腺。bootstrap的a標(biāo)簽樣式是:
.navbar-default .navbar-nav>li>a { color: #777;//它的權(quán)重是0,0,2,2}
??我可以直接這樣：
<li><a href="" style="color:#ffffff">SHOW</a></li>//它的權(quán)重是1,0,0,0
??但是這樣我需要每個(gè)a都去設(shè)置餐禁，所以我還可以這樣:
.navbar-default .navbar-nav>li>a { color: #ffffff;}//它的權(quán)重是0,0,2,2，但是它是后定義的突照，可以生效帮非。
最后我選擇這樣的，因?yàn)槲倚枰康腶標(biāo)簽都使用相同的我定義的樣式:
a{ color:#ffffff!important;}//直接改為重要聲明
??總的來(lái)說(shuō)讹蘑，當(dāng)來(lái)源和重要性一樣的時(shí)候末盔，要去覆蓋其他同樣的屬性的時(shí)候，就需要提高你的樣式特殊性了（可以添加一個(gè)類座慰、加一個(gè)父元素等等）陨舱，特殊性相同時(shí)，后聲明的生效版仔。另外如果相同元素都聲明了游盲！important的話误墓，就還是要看特殊性了。所以說(shuō)益缎，不要濫用important谜慌，最需要的時(shí)候用就是最好的。關(guān)于更多關(guān)于css層疊的信息可以查閱css2.1規(guī)范莺奔。
