一個網站，從看起來還可以，到看起來非常棒，差別在於細節。在實現了頁面裡 某個元件的佈局並寫完樣式之後，不要急著繼續，有意識地訓練自己，以挑剔的眼光審視剛剛完成的程式碼。如果增加或者減少一點內邊距是不是看起來更好。調一下顏色是不是效果更好，如果在開發設計師詳細的視覺稿，實現效果有沒有做到完美還原。

  接下來我們講細節。按鈕使用了背景漸變和投影的話，就會有種立體感。還有一種設計大家使用扁平化設計。扁平化設計講究色彩明快統一，外觀簡潔明瞭，意味著少用漸變，陰影和圓角。我們還是講點基礎東西吧

  基礎選擇器由 4 種。tagname,型別或者標籤選擇器。它的優先順序是 0,0,1 例如 p h1 strong。.class 類選擇器。該選擇器匹配 class 屬性中有指定類名的元素。它的優先順序是 0,1,0.#id id 選擇器。該選擇器匹配擁有指定 id 屬性的元素。它的優先順序是 1,0,0.*通用選擇器。該選擇器匹配所有元素。它的優先順序是 0,0,0.組合器將多個基礎選擇器連線起來組成一個複雜選擇器。例如.nav-menu li 選擇器種，兩個基礎選擇器之間的空格被稱作後代組合器。它表示目標元素 li 是一個擁有 nav-menu 類的元素的後代。不過還存在其他幾個組合器，它們分別代表了元素的某種特定關係。

  子組合器> 匹配的目標元素是其他元素是其他元素的直系後代。例如.parent>.child。相鄰兄弟組合器+匹配的目標元素緊跟在去他元素的後面。例如：p + h2。通用兄弟選擇器~匹配所有跟隨在指定元素之後的兄弟元素。注意，它不會選中目標之前的目標元素。例如 li.actvie ~li。多個基礎選擇器可以連起來（不使用空格或者其他組合器）組成一個複合選擇器。複合選擇器選中的元素將匹配其全部基礎選擇器。例如.dropdown.is-active 能夠選中div class="dropdown is-active"/div,但是無法選中div class="dropdown"/div

  偽類選擇器用於選中處於某個特定狀態的元素。偽類選擇器始終以一個冒號開始。優先順序等於一個類選擇器:first-child匹配的元素是其父元素的第一個子元素。:last-child匹配的元素是其父元素的最後一個子元素。:only-child匹配的元素是其父元素的唯一一個子元素。沒有兄弟元素。:nth-child(an+b)匹配的元素在兄弟元素中間有特定的位置。公式an+b可以從0帶入。:ntn-last-child(an+b)類似nth-child(),但不是從一個元素往後數，而是從最後一個元素從前數。:first-of-type類似於：first-child，但不是根據在全部子元素中的位置查詢元素，而是根據擁有相同標籤名的子元素中的數字順序查詢第一個元素。:last-of-type匹配美中型別的最後一個子元素。:only-of-type該選擇器匹配的元素是滿足該型別的唯一一個子元素。:nth-of-type(an+b)根據元素在特定型別下的數字順序以及特定公式選擇元素。:nth-last-of-type(an+b)根據元素型別以及特定公式選擇元素，從其中最後一個元素往前算，類似:nth-last-chid。:not(selector)匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器。它只能指定元素本身，無法用於排除祖先元素，同時不允許包含另一個排除選擇器。:empty匹配的元素必須沒有子元素。如果元素包含空格就無法由該選擇器匹配，因為空格在dom中屬於文字節點。:focus匹配滑鼠點選，觸控式螢幕幕或者按tab鍵導航而獲得焦點的元素。:hover匹配滑鼠指標正懸停在其上方的元素。:root匹配文件根元素。:disabled匹配已禁用的元素。:enabled匹配已啟用的元素，即那些能夠被啟用或者接受焦點的元素。:checked匹配已經針對選定的複選框，單選按鈕或者選擇框選項。:invalid根據輸入型別中定義，匹配有非法輸入值的元素。例如input type="email",值不是一個合法的郵箱地址時。:valid匹配有合法值的元素。:required匹配設定了required屬性的元素。:optional匹配沒有設定required屬性的元素。

  偽元素類似於偽類，但是它不匹配特定狀態的元素，俄式匹配在文件中沒有直接對應html元素的特定部分。這些選擇器以雙冒號開頭，不多數瀏覽器也支援單冒號的語法以便向後相容。偽元素選擇器的優先順序與型別選擇器(0,0,1)相等。:before建立一個偽元素，使其成為匹配元素的第一個子元素。該元素預設是行內元素，可用於插入文字，圖片或其他形狀。必須指定content屬性才能讓元素出現.:after建立一個偽元素，使其成為匹配元素的最後一個子元素。:first-letter用於匹配元素的第一個文字字元的樣式。:first-line用於指定元素的第一行文字的樣式。:selection用於指定使用者使用滑鼠高亮選擇的任意文字的樣式。

  屬性選擇器用於根據html屬性匹配元素。其優先順序與一個類選擇器(0,1,0)相等。[attr]匹配的元素擁有指定屬性attr，無論屬性值是什麼，例如：input[disabled].[attr='value']匹配的元素擁有指定屬性attr，且屬性值等於指定的字串值，例如input[type='radio'].[attr^{='value']開頭屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字串值，例如：a[href}='https'].[attr='value']結尾屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值的結尾是指定的字串值，例如:a[href=′value′]結尾屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值的結尾是指定的字串值，例如:a[href='.pdf']。[attr*='value']包含屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性包含指定的字串值，例如：[class*='sprite-'].[attr~='value']空格分隔的列表屬性選擇器。該選擇器匹配的元素擁有指定屬性attr,且屬性值是一個分隔的值列表。列表中的某個值等於指定的字串。如a[rel='author'].上述屬性選擇器都是區分大小寫的。（完）