CSS 認識一下
CSS（Cascading Style Sheets）譯「層疊樣式表」，我的理解是：各種樣式疊加的表。
一個網(wǎng)頁，如果沒有 CSS，就是穿著“國王的新衣”，在裸奔！CSS 的重要性不言而喻！
作為 HTML 的衣服，CSS 為 HTML 元素提供了一種樣式描述，定義其顯示方式，TA 能夠?qū)W(wǎng)頁中元素進行像素級精確控制。
CSS 的歷史不做過多贅述，先了解幾種引入方式以及其區(qū)別。
外部樣式是指單獨建立一個擴展名為 .css 的樣式表，在 head 標簽中采用 link 方式引入，也可以使用 import 方式引入：
// link 引入<link rel="stylesheet" type="text/css" href="css/style.css" /> // @import 引入<style type="text/css"> @import url("css/style.css");</style>引入外部樣式的好處就是，一個樣式表可以在多個頁面中復用，墻裂建議使用 link 方式引入，import 新手慎用。
內(nèi)嵌樣式主要通過 <style> 標簽 在頁面中編輯樣式：
<style> .title { color: red }</style>該方法編寫的樣式僅在當前頁面有效，無法用于其他頁面，<style> 標簽可以放在任意位置，建議放在 head 中。
行內(nèi)樣式是在 HTML 頁面中的某個元素上直接對其直接定義，以 p 元素為例：
<p style="color: red"></p>行內(nèi)樣式只對其所在的標簽生效，實際上寫頁面時建議少用或者不用。
引用樣式最好是采用第一種 link 方式引入，分離 HTML 頁面代碼與 CSS 樣式，方便項目的維護管理，以及提高 CSS 樣式的復用性。
其他兩種方法少用或者不用，盡量降低頁面的的復雜性。
HTML 頁面中的元素樣式大多是通過 CSS 選擇器進行控制的。
要想用 CSS 對 HTML 頁面中的元素實現(xiàn)一對一，一對多或者多對一的控制，離不開 CSS 選擇器。
CSS 的選擇器大概有這些：
還有一些可能漏掉了，歡迎留言補充，先復盤一些常見選擇器。
通用選擇器用 * 開頭，后面直接跟上樣式，作用于所有標簽，表示通用定義。
就好比定義所有正常人：一個頭、兩只手、兩條腿。
例：
* { font-size: 18px; color: red}這里表示所有標簽中的字體大小為 18px，顏色為紅色。
標簽選擇器可以選中所有的同類標簽元素，標簽后面直接跟上樣式。
好比規(guī)定學生穿校服，不同工廠的工人有對應的工服。
例：
p { font-size: 16px; color: blue}這里表示所有 p 標簽中的字體大小為 16px，顏色為藍色。
class 選擇器可以選中帶有特定類名的標簽進行樣式定義，也就是一對多，書寫時以 . 開頭，跟上 class 名稱，然后編寫樣式，在對應的標簽中用 class="" 引用。
好比分配一個班級的班干部，給予他們同一類屬性。
例：
// css 樣式.title{ background-color: red}// html 頁面<div class="title">語文課代表</div><div class="title">數(shù)學課代表</div>這里就能把兩個課代表的背景顏色都設(shè)置成紅色，一對多設(shè)置。
id 選擇器以 # 開頭，后面跟上 id 名，然后書寫樣式。在對應的標簽中使用 id="" 引用，其 id 名具有唯一性。
以一個學校為例，定義校長的屬性，一個學校只有一個校長。
例：
// css 樣式#title{ background-color: black}// html 頁面<div id="title">校長</div>這里是定義校長的背景顏色為黑色，雖然說 id 選擇器具有唯一性，如果把幾個元素都命名成相同的 id 名字，CSS 選擇器還是會把被標記的元素都選中應用樣式（和 class 選擇器一樣）。
乍一看，id 選擇器的唯一性似乎不存在。然而，在 javascript 中只會選擇具有相同 id 名字元素中的第一個。所以，養(yǎng)成一個好習慣，同一 id 不要在同一頁面中出現(xiàn)第二次。
注意，由于 CSS 的解釋是自上而下的，對于一個元素的相同屬性賦值，下面的屬性描述會把上面的覆蓋掉，因此在一定要注意屬性的書寫順序。
后代選擇器也稱為包含選擇器，用來選擇特定元素的后代，將父元素放在前面，子元素放在后面，中間加一個空格分開。
這個應該比較好理解吧，打個比方，我是中國人，我所有的后代都留著中國人的血液。
例：
// css 樣式.china p { background-color: yellow}// html 頁面<div class="china"> <p>兒子</p> <p>女兒</p></div>這里的兒子和女兒的背景顏色都會是黃色。
后代選擇器中的元素不限制兩個，也可適用于多層后代關(guān)系，用多個空格加以分開最大嵌套層數(shù)不超過 256 層。
與后代選擇器的不同的是，子代選擇器僅是指 TA 的第一代，后代選擇器通過空格來選擇，子代選擇器通過 > 選擇。
好比我只給我的子女們發(fā)紅衣服，其他后代，例如孫輩，曾孫輩都不發(fā)。
例：
// css 樣式div > strong { color:red}// html 頁面<div> <strong>兒子</strong> <span> <strong>孫子</strong> </span></div>子女的字體顏色是紅色的，而孫輩是默認的顏色。
對多個不同元素做相同的操作的情況下，可以共同使用同一樣式代碼，元素之間用英文逗號分隔，這就是組合選擇器。
好比給不同身份的人發(fā)一個“感動玖柒十大青年獎”，可以把他們?nèi)拷械揭黄饋眍C獎。
例：
// css 樣式div, p, span, h1 { color: red}// html 頁面<div>小明</div><p>小紅</p><span>小剛</span><h1>小利</h1>這里小明、小紅、小剛和小利的顏色都是紅色的，采用組合選擇器最大的好處就是：簡化 CSS 代碼，提高了編碼效率。
相鄰兄弟選擇器還是挺好理解的，MDN 的介紹是：介于兩個選擇器之間，當?shù)诙€元素緊跟在第一個元素之后，并且兩個元素都是屬于同一個父元素的子元素，則第二個元素將被選中。
好比皇帝說下一個生的是兒子就當太子，那就是以當前的最后一個子女為參照物，下一個兒子就是太子，如果先生了個女兒，則不算。
例：
// css 樣式div + p { color: red}// html 頁面<div>大兒子</div><span>二女兒</span><p>二兒子</p><p>三兒子</p>這里都是默認顏色，因為中間相隔了一個二女兒，所以二兒子不能當太子了。
相鄰兄弟選擇器總結(jié)起來就兩個關(guān)鍵點：
通用兄弟選擇器類似于相鄰兄弟選擇器，但肯定是不一樣的，首先不同的是通用兄弟選擇器是用 ~ 連接后面的元素。
繼續(xù)拿皇帝兒子舉例，皇帝說大兒子之后所有的兒子都封王，那就是以大兒子為參照，之后所有的兒子就是王，如果生了個女兒，則略過。
例：
// css 樣式div ~ p { color: red}// html 頁面<div>大兒子</div><span>二女兒</span><p>二兒子</p><p>三兒子</p>這里都是你猜一下會是神馬樣子？
偽類選擇器通常是用來描述元素在一些特定狀態(tài)下的樣式，最常見的就是用在 a 元素（超鏈接）中了，當然其他元素也可以，只不過相對來說少一些。
就好比拿人來說，不開心的時候會皺眉，開心的時候會笑，發(fā)火的時候可能會摔東西，主要是對不同的狀態(tài)定義。
例：
// 沒有被訪問過a標簽的樣式a:link { color: black}// 訪問過后a標簽的樣式a:visited { color: yellow}// 鼠標懸浮時a標簽的樣式a:hover { color: red}// 鼠標摁住的時候a標簽的樣式a:active { color: blue}偽類選擇器我覺得應該是最有趣的選擇器了，試試就知道了。
媒體查詢應該算是選擇器吧，不管那么多我先把 TA 拉進來。
TA 能在不同的條件下使用不同的樣式，使頁面在不同在設(shè)備下達到不同的渲染效果。
好比一個人在不同的場景下做不同的事，為父親的時候教育子女，為丈夫的時候保護妻子，為人子的時候照顧父母。
例：
@media screen and (max-width: 300px) { body { background-color: red }}這里的樣式表示如果頁面寬度小于 300px 則修改背景顏色為紅色，簡單易理解吧。
CSS 的簡單復盤就到這里了，所有的實例都沒有用截圖展示，還是希望各位能自己去試一試，看看效果，多敲才是正道。
如果有一些地方寫的不對，也歡迎指正，分享即學習。
