CSS選擇器、層疊、繼承的那些事

題外話

最近看了《精通CSS，高級web標準解決方案》這本書。因此接下來的幾篇文章結合本身的理解，參照本書作一下總結。

好，廢話很少說，開始進入正題。

CSS的前世此生

在好久好久之前，早期的瀏覽器只支持簡易版本的HTML，使用HTML添加基本的格式和結構。可是隨着web的流行，人們開始不知足於只有結構和文本的樣式了！！

看一下1999年搜狐的頁面：

人都是愛漂亮的，因此HTML開始用來表現頁面了，這樣一來就web領域就變得一團糟了，試想一下當你把全部的樣式都裝在同一個HTML文檔的時候，是多麼的恐怖。

發展到了這裏，HTML有點跑偏了，貌似HTML並無被看做是簡單的標記語言，反而是把表現、佈局與內容融成了一團，讓人們看起來複雜、混亂、更加易於出錯（不只僅易於出錯，查錯也至關困難！）。總之開發人員避而遠之，用可視化的編輯器來代替。這樣下去的結果就是：連開發者本身都不知道如何編寫代碼。（因此當時的負責web開發的程序員可能也是蒙圈的狀態）

就在束手無策之際，CSS橫空出世！解決了這一問題，CSS出現的意義就是：要文檔的內容與表現分隔開。這對於程序員應該至關熟悉了，內容與表現分開的好處就在於：我在單獨設計內容時候，不用考慮表現，在單獨實際表現的時候，不用過度的考慮內容，這樣下去帶來的結果就是：①更加簡單，架構清晰。②修改容易，在一個地方修改，就會貫徹到整個系統。

因此，標記（HTML）再一次返璞歸真，天下太平。

咱們極力擺脫內容與表現重合，因此在之後的設計中，儘量的區分出內容和表現。
爲HTML元素命名的時候，要根據「它是什麼」，而不是「它的外觀是什麼"命名。

例如：
若是你想要新聞類型的元素表現爲紅色。好的命名：news 壞的命名：red 同理leftbottom相似的方位命>名，也是很差的。

CSS選擇器

何爲選擇器？

答：選擇+容器。（即挑選出來，並放到容器中）

咱們以前提到了要把內容和表現分離，而選擇器就是實現這一技術的重要手段。

若是咱們把HTML和CSS開發的過程想象成不一樣人打扮本身的話。

那麼HTML就是如圖所示的人，他是一個結構化的語言，他能夠將頁面分爲好幾個部分，每一個部分又包含了不一樣的元素。

如：頭部包含頭頂，眼睛，耳朵等等。

那麼CSS是什麼呢，CSS是裝扮人的東西！！
好比：帽子，眼鏡，外套等等。他的目的就是讓人有不一樣的風格，更好看，也有可能更醜（這取決於不一樣人的審美）。

CSS選擇器的做用就是將相應的元素選擇出來，併爲他們應用樣式。

好比：把眼睛選擇出來，給他戴上眼鏡；把脖子選擇出來，帶上領帶。

怎麼樣，理解了吧！！！

接下來就讓咱們看看有哪些選擇器！

元素選擇器

最最廣泛的選擇器，也是最簡單的。只須要元素就能夠了

//給h2小帥哥穿上黑色西裝
h2 {
    color:black;
}

後代選擇器

用來尋找特定元素的後代。

//快給div家族的孩子h2穿上黑色西裝。
div h2 {
    color:black;
}

類選擇器

用來尋找特定的類。

//給別名爲news孩子穿上黑色西裝
.news {
    color:black;
}

ID選擇器

用來尋找特定ID的元素。

//給ID爲header的美女穿上黑色西裝
#header {
    color:black;
}

以上四種選擇器，是最簡單，也是最經常使用的幾個類。能夠互相結合
如：

//選擇類名爲news的p元素
p.news {
    color:red;
}

僞類選擇器

這個是什麼意思呢？不要只要看到沒見過的東西就着急查資料。其實很簡單！

聯想一下：那什麼是「僞娘」呢？哈哈哈

僞類：假裝成類的一種類，他自己不是類。

其中分爲如下兩類：

1. 只對於連接a 元素有效的是：a:link a:visited
2. 應用於任何一個元素：:hover :active 和:focus 還有:first-child :lang

通用選擇器

用*來表示選擇出全部的元素。

* {
    padding:0;
    margin:0;
}

子選擇器和相鄰孩子選擇器

還記得後代選擇器嗎，用空格表示前面元素的後代，這個後代是個很大的概念，兒子算是後代，孫子也是後代......因此就突出兒子選擇器的重要性了！！

用>這個符號來用於兒子選擇器.

「>」：是左邊的地位比右邊的大，因此左邊表明父親，右邊表明兒子。

而相鄰孩子選擇器用「+」，該如何理解呢?

「+」: 一方面是表明兩個元素是平等的，都處於同一級別，另外一個是表明着鏈接的意思，也就是說左邊的元素以後的某一個元素。

例如：

//兒子選擇器，選擇的是nav的兒子li
#nav>li {
    padding:20px;
}

//相鄰孩子選擇器,選擇的是，和h1同等級別的，而且在和h1緊鄰的後面的p元素
h1 + p {
    color:red;
}

屬性選擇器

根據某個屬性值來尋找元素。用[屬性值]來表示
能夠根據這個屬性值搜索出來不少東西。
先給出html的代碼：

<h3>這是個人朋友名單：</h3>
    <ul class="myfriend">
        <li my-friend="1">張大傻</li>
        <li my-friend="2">李老二</li>
        <ul my-dog>
            <li>哈巴1</li>
            <li>哈巴2</li>
        </ul>
        
        
        <li my-friend="3">王尼瑪</li>
        <li my-cat>仙女喵</li>
        <li my-friend="4 stupid">正最傻</li>
        
    </ul>

預覽圖

關於屬性選擇器的匹配問題：

1.精確匹配

[attr]:包含attr屬性的所有元素。
[attr="title"]：屬性僅是attr=title的所有元素，精確匹配！
[attr~="title"]：其中包含title的attr屬性的元素（中間有空格）。

/*將全部my-friend屬性的元素 設置成藍色*/
[my-friend] {
    color:blue;
}

/*將排名爲第一的my-friend屬性的元素 設置成金色的背景*/
[my-friend="1"] {
    background-color:gold;
}

/*將my-dog 屬性的ul元素設置成灰色*/
ul[my-dog] {
    color:#ccc;
}

/*將my-friend屬性而且包含stupid 的元素，用紅色顯示。*/
[my-friend~="stupid"] {
    color:red;
}

效果圖：

這裏須要注意的就是：
attr="title"是徹底匹配的，因此即便李老二的myfriend屬性有1，但沒有成爲金色背景的緣故。

2.模糊匹配

[attr|=val] : 選擇attr屬性的值以val（包括val）或val-開頭的元素（-用來處理語言編碼）。（把中間的一豎理解爲：隔斷牆，後面就是從隔斷牆頭開始的元素。）

注意：這個必須是整個單詞，通過本人測試，val是整個單詞的時候，和attr=val效果是同樣的，若是有單詞中有 - ，效果和attr^=val- 同樣的。（注意短橫）
[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。（把^理解爲腦殼，就是「頭」了啊。）
[attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。（把$理解爲尾巴）
[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。（想一下游戲中的屏蔽系統吧：我草泥馬會被屏蔽掉 。怎麼樣，很形象吧？）

/*上面的代碼省略不寫，和上面一致*/

/*將以my開頭的 class全部元素加粗顯示*/
[class|="my"] {
    font-weight:bold;
}
/*其餘相似。再也不一一列舉*/

最終效果圖：

關於層疊

若是你對上面所講到的穿衣服印象深入的話，那麼層疊就表明着穿上衣服最後呈現的效果，這個效果和不少因素有關。

好比：你媽媽叫你穿秋褲，你雖然不想穿，可是仍是得穿上，你以爲太醜，在外面套上了帥氣的牛仔褲，雖然裏面有點肥，可是仍是很好看。

這一過程就體現了層疊， 頁面中最終呈現的效果和不一樣選擇器的優先級有關，我把這個總結成五看，而不是像一些書中的用特殊性的進行解釋（我以爲不太適合理解）。

一看：看該樣式是否是行內樣式，是優先級最高。(所謂行內樣式就是在html中直接指定的樣式）
二看：ID選擇器的數量越多，越優先顯示
三看：看類，僞類，屬性選擇器的數量，越多越優先顯示
四看：看元素，僞元素選擇器的數量。
五看：在以上所有相等的狀況下，最後樣式的會覆蓋掉先前的樣式。

舉例：
#wrapper #content{}和 #wrapper p{}同時做用的時候， 第一個優先顯示，由於有兩個ID選擇器

因此有的時候，爲了防止有層疊的現象產生，會多加一個id選擇器或類選擇器，好讓他的優先級變高。設計的時候，要秉承着通常性樣式優先級下降，特殊性樣式要優先級升高的原則。

從這裏再退回到僞類選擇器的地方。對於連接的僞類有五個，他們是有必定的層疊優先級的。
順序是：：link，：visited，：hover，：focus，：active。
是否是以爲很難記？

不要緊，記住這一句話，你就能記住了：lvhfa（你好煩啊）！分別是前面的首字母。快去應用幾回，你就徹底記住了！

關於繼承

繼承的意思就是：祖先留給孩子的遺產。

在CSS也是這樣，若是後代元素沒有定義樣式，那麼會繼承自祖先的樣式。

繼承的優先級爲空！你可能會想到標題元素，若是在主體上設置字號，而標題元素卻好像沒有繼承下來，這是爲何呢？

那是由於瀏覽器會給默認樣式設置標題字號。因此優先顯示。

更新狀況

2017.12.02 完成寫做