導覽列布局時遇到的問題以及解決辦法 css選取器優先順序

標籤：思想   xxx   為什麼   實現   樣式   images   com   開發   type   

得到的導覽列效果

添加#menu ul li{width：30px;}

效果

將會使清單項目和分隔地區的寬度同時改變因為id選取器的優先順序高於類別選取器，此時應該為清單項目添加內聯樣式

才能得到如下效果

或者可以使用第二種方法

#menu ul li{
float:left;
margin-left:10px;text-align:center;padding-left:10px;實現清單項目文字的置中

line-height:28px;
height:28px;
width:40px;
border-left:2px solid red;添加分割線
}

第二個遇到的問題是清單項目的浮動錯位問題

解決辦法是在列表ul的樣式表中添加屬性font-size:0px;

#menu ul{
list-style-type:none;
font-size:0px;
height:28px;
}

第三個遇到的問題是左右浮動錯位問題，不知道怎麼解決，小憂傷

選取器種類

嚴格來講，選取器的種類可以分為三種：標籤名選取器、類別選取器和ID選取器。

選取器的優先順序別

 

瞭解了各種選取器後，還有一個重要的知識點就是CSS選取器的優先順序。這也就是為什麼polaris會遇到文章開頭的問題。舉個簡單的例子

<div class="city">

    <span class="beijing"> beijing  </span> 

    <span> beijing </span> 

</div> 

如果已經把.city下面span內的字型設定成紅色：

1. .city span {color:red;} 

這時，如果要改變.city的顏色為藍色，用下面的命令是不能實現的：

1. .city {color:blue;} 

出現這種情況就是因為後一個命令的優先順序不夠，兩條相互衝突的樣式設定，瀏覽器只會執行優先順序較高的那個。

那麼選取器的優先順序是怎麼規定的呢？

一般而言，選取器越特殊，它的優先順序越高。也就是選取器指向的越準確，它的優先順序就越高。通常我們用1表示標籤名選取器的優先順序，用10表示類選擇 器的優先順序，用100標示ID選取器的優先順序。

比如上例當中 .polaris span {color:red;}的選取器優先順序是 10 + 1 也就是11；而 .polaris 的優先順序是10；瀏覽器自然會顯示紅色的字。

div.test1 .span var 優先順序 1+10 +10 +1  

span#xxx .songs li 優先順序1+100 + 10 + 1  

#xxx li 優先順序 100 +1 

對於什麼情況下使用什麼選取器，用不同選取器的原則是：第一：準確的選到要控制的標籤；第二：使用最合理優先順序的選取器；第三：HTML和CSS代碼盡量簡潔美觀。通常：

1、最常用的選取器是類別選取器。

2、li、td、dd等經常大量連續出現，並且樣式相同或者相類似的標籤，我們採用類別選取器跟標籤名選取器結合的後代選取器 .xx li/td/dd {} 的方式選擇。

3、極少的情況下會用ID選取器，當然很多前端開發人員喜歡header，footer，banner，content設定成ID選取器的，因為相同的樣式在一個頁面裡不可能有第二次。

在這裡不得不提使用在標籤內引入CSS的方式來寫CSS，即：

<div style="color:red">city</div> 

這時候的優先順序是最高的。我們給它的優先順序是1000，這種寫法不推薦使用，特別是對新手來說。這也完全違背了內容和顯示分離的思想。DIV+CSS的優點也不能再有任何體現。

簡潔、高效的CSS

所謂高效的CSS就是讓瀏覽器在尋找style匹配的元素的時候盡量進行少的尋找，下面列出一些我們常見的寫CSS犯一些低效錯誤：

◆不要在ID選取器前使用標籤名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋： 因為ID選取器是唯一的，加上div反而增加不必要的匹配。

◆不要再class選取器前使用標籤名

一般寫法：span.red

更好寫法：.red

解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：

1. p.red{color:red;}  
2. span.red{color:#ff00ff} 

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫

◆盡量少使用層級關係

一般寫法：#divBox p .red{color:red;}

更好寫法：.red{..}

◆使用class代替層級關係

一般寫法：#divBox ul li a{display:block;}

 

導覽列布局時遇到的問題以及解決辦法 css選取器優先順序