大佬總結，帶你快速成為前端工程師，從入門到棄坑，附乾貨
互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關注點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工...
在HTML中，加入CSS樣式表的方式一般有3種：
通過link鏈接CSS外部樣式表（稱之為外部樣式表）；
2.是在HTML的<head>段中用<style>元素將樣式包含在頁面內部的樣式設置中（嵌入式樣式表）；
3.是直接在頁面中加入一個style屬性（內聯樣式表）。
那麼瀏覽器是如何加載CSS層疊樣式表的呢？瀏覽器先是加載HTML語言，並構建HTML文檔樹，如果有內聯樣式表，那麼它會先加載他，其後若是還有嵌入樣式表，那麼他在內聯樣式表之後再加載，最後如果還有外部樣式表那麼他最後加載到網頁中。所以是內聯樣式表的優先級>嵌入式樣式表>外部樣式表。
那麼對於CSS樣式表中選擇器的優先級是：ID選擇器>類選擇器>元素選擇器>偽元素選擇器。雖然ID選擇器的優先級最高，但一般並不會用到它，多用到的是類選擇器與元素選擇器。
對於下面一樓提出的關於選擇器特殊性。這裡特殊性是一個一個選擇器的數字表示。
基本的：
在級聯計算中指定一個CSS規則的權重時，會首先根據重要性（是否有!importance）和CSS來源對規則進行排序。重要性和來源相同的規則，就按特殊性排列：特殊性高的選擇器會覆蓋特殊性低的選擇器。最後，如 果兩個選擇器具有同樣的來源、重要性和特殊性，寫在樣式表後面的那個規則就會覆蓋寫在前面的規則。這也適用於單一的屬性，因此，如果在同一個規則中多次聲明瞭相同的屬性，最後的聲明就會覆蓋前面的聲明。
因為使用@import聲明導入的樣式表必須要寫在其他規則之前，如果在CSS文件後面出現的非導入規則，與導入文件中的規則具有同樣的權重，導入規則將被覆蓋（因為選擇器的順序，後面的覆蓋前面的）。
根據W3C規範（http://www.w3.org/TR/css3-selectors/#specificity），特殊性的計算使用四個字母”a、b、c、d”來代表重要性依次遞減，其中：
a 如果該聲明是在style屬性中定義的，則為1，否則為0；
b 等於id選擇器的數目；
c 等於屬性選擇器、class和偽class的數量；
d 等於元素名和偽元素的數目。
非CSS語法的標記（如font屬性），特殊性都歸為0。基於這一系列規則，以下選擇器的特殊性為 1,0,0,0 （a=1，b=0，c=0，d=0）：
<section style="padding-bottom: 10px;">
因為這裡是內聯CSS，a=1，其餘數字是0。記住，假如在非內聯的鏈接樣式表中，有一處帶10個id選擇器（特殊性為0,10,0,0）的規則，它的優先級仍然不如以上選擇器——特殊性的計算不是基於十進制升位的，後面的數再高也不能升到前一位：a=1的規則將始終優先於其他a=0的規則。
以下選擇器更復雜一些，特殊性為0,0,1,3（a=0，b=0，c=1，d=3）：
article section h1.title {
...
}
因為不是內聯的，a=0；因為沒有id，b=0；因為有一個class選擇器，c=1；因為有三個元素選擇器
d=3。
基於這一系列算法來對特殊性進行計算，可能令人望而生畏。但實際上，有了一些經驗後，很容易看出一個選擇器比起另一個選擇器特殊性是高還是低，如有一個或兩個id選擇器，或其他類似的明顯提示。編寫CSS時應該小心，如果沒有必要，不要創建高特殊性的選擇器。如果遇到棘手的情況，類似Firebug或Safari Web Inspector等工具將幫助你瞭解特殊性如何應用於元素，它們能按照特殊性排序來顯示規則，將特殊性更高的規則顯示在最上面，並將被特殊性更高的規則覆蓋的屬性用刪除線劃掉。有關內容詳見第10章。然而應該記住兩件重要的事情：內聯CSS要比嵌入或鏈接CSS優先級更高；一個ID選擇器要比任意數量的class、屬性或元素選擇器優先級更高。
切圖 qietu(.com) 前端外包首選
相關推薦
'CSS選擇器和優先級總結，告誡自己不能任性使用！important'
"如果在項目裡面使用了通用的reset.css樣式，但是在具體的頁面裡面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎麼做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式後面加上!important屬性本文將告訴大家關於CSS選擇器和優先級...
'CSS 偽元素基礎知識：before 與after （一）'
"最近因為一些網頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發現原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。什麼是「偽元素」？...
'你必須懂的前端性能優化｜乾貨分享'
"從輸入URL加載起看方向從輸入 URL 到頁面加載完成的過程：首先做 DNS 查詢，如果這一步做了智能 DNS 解析的話，會提供訪問速度最快的 IP 地址回來 接下來是 TCP 握手，應用層會下發數據給傳輸層，這裡 TCP 協議會指明兩端的端口號，然後下發給網絡層。網絡層...
'前端項目迭代發版防止瀏覽器緩存js和css'
"歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。前言最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是...
'爬蟲入門系列四：HTML文本解析庫BeautifulSoup，Python3路徑乾貨'
"今天就來講講如何從 HTML 中提取出感興趣的數據直接字符串處理？自己寫個 HTML 解析器來解析嗎？還是用正則表達式？這些都不是最好的辦法，好在，Python 社區在這方面早就有了很成熟的方案，BeautifulSoup 就是這一類問題的剋星，它專注於 HTML 文檔操...
推薦中...