在html頁面中,如果我們想要去改變乙個元素的字型大小、尺寸、顏色、樣式等 ,就需要用到css選擇器來進行對修改元素一對一或者多對一的進行匹配並改變其樣式,這就是css選擇器。選擇器是一種模式，它能在頁面上匹配一些元素，使相關的宣告僅被應用到被選擇的元素上。
1、命名
w3c css2.1的 4.1.3 節中提到：識別符號（包括選擇器中的元素名，類和id）只能包含字元[a- za-z0-9]和iso 10646字元編碼u+00a1及以上， 再加連字型大小（-）和下劃線（_）；它們不能以數字，或乙個連字型大小後跟數字為開頭。
1.1 字元採用
實際專案中，建議只採用字元[a-za-z0-9]，再加連字型大小（-）和下劃線（_）。避免使用中文。
1.2 慎用數字
以字母開頭，避免純數字，避免數字開頭，以保證相容。以數字開始的類名、id名僅在ie6/ie7/ie8下被識別，而其它瀏覽器下則不識別（忽略該規則）。
1.3 區分id和class
乙個id名在文件中只使用一次，class類名可在文件中多次使用。
1.4 語義化標籤
語義化標籤是個很大的話題，簡單點說，語義化標籤就是讓css選擇器的命名能夠反映頁面結構的功能區塊，如內容區域的class類名定義為content，頁尾區域的class類名定義為footer。語義化標籤的乙個好處是讓網頁結構一目了然，另外乙個好處是提高網頁對一些特殊瀏覽裝置的友好性。
15 區分大小寫
當在xhtml中使用css，css裡定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。
class和id的值在html和xhtml中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在css的定義和xhtml裡的標籤是一致的。
選擇器的型別有元素選擇器、類選擇器、id選擇器、屬性選擇器、偽類選擇器、偽元素選擇器、組合選擇器
下面會挨個為大家簡單介紹一下
1.元素選擇器：
元素選擇器通常會是選擇某個html元素，如p、a甚至可以是html本身。
而且元素選擇器會匹配到html頁面中被選擇器選中元素的頁面中的全部元素。
2.類選擇器：
通過給樣式前面加乙個點號"."來進行表示。
類選擇器可以應用樣式而不用考慮其他被涉及的原色.
3.id選擇器:
id選擇器通常是由乙個#字元表示
4.屬性選擇器[attr]:
它可以根據元素的屬性和屬性值來選擇元素 , 比如要選擇html頁面中有class屬性(值不限)的div元素,使其margin-left:10px.
5.偽類選擇器:
css 偽類（pseudo-class）
是乙個以冒號(:)作為字首的關鍵字，當你希望樣式在特定狀態下才被呈現到指定的元素時，你可以往元素的選擇器後面加上對應的偽類（pseudo-class）。
6. 偽元素選擇器：
偽元素（pseudo-element）
跟偽類很像，但它們又有不同的地方。它們都是關鍵字 —— 但這次偽元素字首是兩個冒號 (::) —— 同樣是新增到選擇器後面達到指定某個元素的某個部分。
::after
::before
::first-letter
::first-line
::selection
::backdrop
7. 組合選擇器：
一次使用乙個選擇器是很有用的，但在某些情況下卻可能效率低下。 css選擇器變得更加有用,當你開始結合他們進行細粒度的選擇。css有幾種方法可以選擇元素基於它們如何彼此相關。這些關係與組合子表示如下(a和b代表任何選擇器):
3、優先順序
css三大特性—— 繼承、 優先順序和層疊。
繼承：即子類元素繼承父類的樣式;
優先順序：是指不同類別樣式的權重比較;
層疊：是說當數量相同時，通過層疊(後者覆蓋前者)的樣式。
css 是 cascading style sheets 的縮寫，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它表明css規則的順序很重要，但它比那更複雜。什麼選擇器在層疊中勝出取決於三個因素（這些都是按重量級順序排列的——前面的的一種會否決後一種）：
重要性（importance）
專用性（specificity）
源**次序（source order）
有乙個特別的語法可以讓一條規則總是優先於其他規則：!important。
乙個選擇器具有的專用性的量是用四種不同的值（或元件）來衡量的，它們可以被認為是千位，百位，十位和個位——在四個列中的四個簡單數字：
千位：如果宣告是在style 屬性中該列加1分（這樣的宣告沒有選擇器，所以它們的專用性總是1000。）否則為0。
百位：在整個選擇器中每包含乙個id選擇器就在該列中加1分。
十位：在整個選擇器中每包含乙個類選擇器、屬性選擇器、或者偽類就在該列中加1分。
個位：在整個選擇器中每包含乙個元素選擇器或偽元素就在該列中加1分。
css選擇器是從右往左解析的。瀏覽器專門建立了乙個反常規思維的從右往左的匹配規則就是為了避免對所有元素進行遍歷。
3.常見問題
webkit核心瀏覽器所有的類名(classes)都是以8位元組字串儲存的。對位元組稍稍了解的人都知道，8位元組最大值就是255. 當同時出現256個class, 勢必會越過其邊緣，溢位到id區域。
選擇器的權值不能進製，
並不是id選擇器權值失效。
1、mdn選擇器
2、css選擇器命名規則
3、css選擇器優先順序總結
4、為什麼css選擇器是從右往左解析
問：使用bootstrap框架，再引入自己的外鏈css檔案，會有效果嗎，是否會和框架原樣式衝突？
答：外部css檔案都是使用link引入，兩個檔案的優先順序是後面的大於前面，選擇器權值相同的情況下後面的覆蓋前面的樣式，除非使用！important
問：元素選擇器是什麼?
答：元素選擇器是標籤名，塊級元素的div、p，內聯元素的a、span、img
問：有沒有什麼選擇器，能選擇上級或者父級
答：選擇器只能向下選擇，沒有選擇器選定父級。
技能樹.it修真院
「我們相信人人都可以成為乙個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫」。
這裡是技能樹.it修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。
快來與我一起學習吧~
修真院小課堂 z index初解，工作原理
今天給大家分享一下，修真院官網前端任務4，深度思考中的知識點 z index初解，工作原理 一，背景介紹 1.含義 z index屬性指定了元素及其子元素的 z順序 而 z順序 可以決定當元素 發生覆蓋的時候，哪個元素在上面。通常乙個較大的z index值的元素會覆蓋較低的那乙個 前提是元素支援z ...
修真院web小課題 如何使用sass？
1.背景介紹 關於sass sass 的開發文件中如此描述自己 sass 是 css 的乙個擴充套件,它使 css 的使用起來更加優雅和強大。sass 的終極目標是解決 css 的缺陷。如我們所知，css 並不是乙個完美的語言。css 雖然簡單易學，卻也能迅速製造嚴重的混淆，尤其是在工程浩大的專案中...
CSS練習 IT修真院 練習4 移動端介面
完成簡單布局，然後填充介面 與效果圖對比優化 完成驗收要求 header擴充套件性 頂欄固定 進行placeholder樣式相容性研究 完成任務四 深度思考 task4跟隨深度思考 師兄建議進行修改 深度思考 手機解析度和網頁px的區別 todo 週末補學 明確效果 乙個寬度自適應螢幕的登入介面 步...