【CSS】——三大基礎選擇器以及優先順序
前提
小編最近在學習前端的一些內容，想要做出使用者體驗度高的介面，CSS是我們必須要學習的一門程式語言。
何為CSS？
CSS（Cascading Style Sheets，層疊樣式表）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。
為什麼有CSS選擇器？
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
CSS選擇器又什麼？
每一條css都是有兩部分組成：[code]選擇器{樣式}[/code]，選擇器就是代表{}中樣式作用的物件，也就是這些樣式作用於哪些元素。
關於CSS的選擇器有很多種，根據百度百科描述大概有十二種，不用擔心種類太多不容易學習。其實基礎的選擇器就僅僅三種而已，其餘的都是在這個基礎上擴充套件而來。所以小編本次主要講解三種基本選擇器——標籤名選擇器、類別選擇器、ID選擇器。
基本選擇器語法
//標籤名選擇器——在css中有很多標籤，類似有p，h1，h2等等之類。直接用HTML標籤表示就可以了。
p{ 樣式; }
//類別選擇器——根據類名class來選擇樣式前面用“.”來標識
.democlass{
樣式;
}
<div class=”democlass”>內容</div>
//ID選擇器——標有特定 ID 選擇器的優先順序
先看個簡單例子
<style>
.polaris span{color:red;}
.beijixing {color:blue;}
</style>
</head>
<body>
<div class="polaris">
<span class 理論上是
實際上是這樣的
如果已經把.polaris下面span內的字型設定成紅色：
.polaris span {color:red;} 這時，如果要改變.beijixing的顏色為藍色，用下面的命令是不能實現的：
.beijixing {color:blue;} 出現這種情況就是就類似於之前學習過程遇到的運算子的優先順序順序，同樣CSS選擇依舊存在同樣的問題。因為後一個命令的優先順序不夠，兩條相互衝突的樣式設定，瀏覽器只會執行優先順序較高的那個。
選擇器優先順序的規定
選擇器特殊性越高，它的優先順序也是越高的；就是定義的位置越準確，它的優先順序越高。通常用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選擇器使用原則
1、 準確的選到要控制的標籤；
2、 使用最合理優先順序的選擇器
3、 HTML和CSS程式碼儘量簡潔美觀。
通常：1、經常使用類別選擇器；2、極少情況下選擇ID選擇器很多前端開發人員喜歡header，footer，banner，conntent設定成ID選擇器的，因為相同的樣式在一個頁面裡不可能有第二次。
在這裡不得不提使用在標籤內引入CSS的方式來寫CSS，即：
<div style="color:red">polaris</div>
這時候的優先順序是最高的。我們給它的優先順序是1000，這種寫法不推薦使用，這也完全違背了內容和顯示分離的思想。DIV+CSS的優點也不能再有任何體現。
總結
關於css選擇器的學習上述內容僅僅是非常基礎的一些內容，個人認為理解選擇器的優先順序順序會非常有利於編寫，減少不必要的錯誤。而且CSS選擇器在三大基礎的層次上有很多擴充套件，同樣非常值得研究，想要做出簡潔高效的CSS，後面還需繼續鑽研！