摘要：選擇器的作用就是將相應(yīng)的元素選擇出來，并為他們應(yīng)用樣式。給別名為孩子穿上黑色西裝選擇器用來尋找特定的元素。效果圖這里需要注意的就是是完全匹配的，所以即使李老二的屬性有，但沒有成為金色背景的緣故。

最近看了《精通CSS，高級web標(biāo)準(zhǔn)解決方案》這本書。所以接下來的幾篇文章結(jié)合自己的理解，參照本書做一下總結(jié)。

好，廢話不多說，開始進(jìn)入正題。

在很久很久以前，早期的瀏覽器只支持簡易版本的HTML，使用HTML添加基本的格式和結(jié)構(gòu)。但是隨著web的流行，人們開始不滿足于只有結(jié)構(gòu)和文本的樣式了??！

看一下1999年搜狐的頁面：

人都是愛美的，所以HTML開始用來表現(xiàn)頁面了，這樣一來就web領(lǐng)域就變得一團(tuán)糟了，試想一下當(dāng)你把所有的樣式都裝在同一個HTML文檔的時候，是多么的恐怖。

發(fā)展到了這里，HTML有點(diǎn)跑偏了，貌似HTML并沒有被看作是簡單的標(biāo)記語言，反而是把表現(xiàn)、布局與內(nèi)容融成了一團(tuán)，讓人們看起來復(fù)雜、混亂、更加易于出錯（不僅僅易于出錯，查錯也相當(dāng)困難?。??？傊_發(fā)人員避而遠(yuǎn)之，用可視化的編輯器來代替。這樣下去的結(jié)果就是：連開發(fā)者自己都不知道如何編寫代碼。（所以當(dāng)時的負(fù)責(zé)web開發(fā)的程序員可能也是蒙圈的狀態(tài)）

就在一籌莫展之際，CSS橫空出世！解決了這一問題，CSS出現(xiàn)的意義就是：要文檔的內(nèi)容與表現(xiàn)分隔開。這對于程序員應(yīng)該相當(dāng)熟悉了，內(nèi)容與表現(xiàn)分開的好處就在于：我在多帶帶設(shè)計(jì)內(nèi)容時候，不用考慮表現(xiàn)，在多帶帶實(shí)際表現(xiàn)的時候，不用過分的考慮內(nèi)容，這樣下去帶來的結(jié)果就是：①更加簡單，架構(gòu)清晰。②修改容易，在一個地方修改，就會貫徹到整個系統(tǒng)。

所以，標(biāo)記（HTML）再一次返璞歸真，天下太平。

我們極力擺脫內(nèi)容與表現(xiàn)重合，所以在以后的設(shè)計(jì)中，盡可能的區(qū)分出內(nèi)容和表現(xiàn)。
為HTML元素命名的時候，要根據(jù)“它是什么”，而不是“它的外觀是什么"命名。

例如：
如果你想要新聞類型的元素表現(xiàn)為紅色。好的命名：news  壞的命名：red  同理leftbottom類似的方位命>名，也是不好的。

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

我們之前提到了要把內(nèi)容和表現(xiàn)分離，而選擇器就是實(shí)現(xiàn)這一技術(shù)的重要手段。

如果我們把HTML和CSS開發(fā)的過程想象成不同人打扮自己的話。

那么HTML就是如圖所示的人，他是一個結(jié)構(gòu)化的語言，他可以將頁面分為好幾個部分，每個部分又包含了不同的元素。

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

那么CSS是什么呢，CSS是裝扮人的東西?。?br>比如：帽子，眼鏡，外套等等。他的目的就是讓人有不同的風(fēng)格，更好看，也有可能更丑（這取決于不同人的審美）。

CSS選擇器的作用就是將相應(yīng)的元素選擇出來，并為他們應(yīng)用樣式。

比如：把眼睛選擇出來，給他戴上眼鏡；把脖子選擇出來，帶上領(lǐng)帶。

怎么樣，理解了吧?。?！

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

最最普遍的選擇器，也是最簡單的。只需要元素就可以了

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

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

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

用來尋找特定的類。

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

用來尋找特定ID的元素。

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

以上四種選擇器，是最簡單，也是最常用的幾個類?？梢曰ハ嘟Y(jié)合
如：

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

這個是什么意思呢？不要只要看到?jīng)]見過的東西就著急查資料。其實(shí)很簡單！

聯(lián)想一下：那什么是“偽娘”呢？哈哈哈

偽類：偽裝成類的一種類，他本身不是類。

其中分為以下兩類：

只對于鏈接a 元素有效的是：a:link a:visited

應(yīng)用于任何一個元素：:hover :active 和:focus 還有:first-child :lang

用*來表示選擇出所有的元素。

* {
    padding:0;
    margin:0;
}

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

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

“>”：是左邊的地位比右邊的大，所以左邊代表父親，右邊代表兒子。

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

“+”: 一方面是代表兩個元素是平等的，都處于同一級別，另一個是代表著連接的意思，也就是說左邊的元素之后的某一個元素。

例如：

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

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

根據(jù)某個屬性值來尋找元素。用[屬性值]來表示
可以根據(jù)這個屬性值搜索出來很多東西。
先給出html的代碼：

這是我的朋友名單：
    

        
張大傻
        
李老二
        

            
哈巴1
            
哈巴2
        
        
        
        
王尼瑪
        
仙女喵
        
正最傻
        
    

預(yù)覽圖

關(guān)于屬性選擇器的匹配問題：

1.精確匹配

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

/*將所有my-friend屬性的元素 設(shè)置成藍(lán)色*/
[my-friend] {
    color:blue;
}

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

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

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

效果圖：

這里需要注意的就是：
attr="title"是完全匹配的，所以即使李老二的myfriend屬性有1，但沒有成為金色背景的緣故。

2.模糊匹配

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

注意：這個必須是整個單詞，經(jīng)過本人測試，val是整個單詞的時候，和attr=val效果是一樣的，如果有單詞中有 - ，效果和attr^=val- 一樣的。（注意短橫）
[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。（把^理解為腦袋，就是“頭”了啊。）
[attr$=val] : 選擇attr屬性的值以val結(jié)尾（包括val）的元素。（把$理解為尾巴）
[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。（想一下游戲中的屏蔽系統(tǒng)吧：我草泥馬會被屏蔽掉 。怎么樣，很形象吧？）

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

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

最終效果圖：

如果你對上面所講到的穿衣服印象深刻的話，那么層疊就代表著穿上衣服最后呈現(xiàn)的效果，這個效果和很多因素有關(guān)。

比如：你媽媽叫你穿秋褲，你雖然不想穿，但是還是得穿上，你覺得太丑，在外面套上了帥氣的牛仔褲，雖然里面有點(diǎn)肥，但是還是很好看。

這一過程就體現(xiàn)了層疊， 頁面中最終呈現(xiàn)的效果和不同選擇器的優(yōu)先級有關(guān)，我把這個總結(jié)成五看，而不是像一些書中的用特殊性的進(jìn)行解釋（我覺得不太適合理解）。

一看：看該樣式是不是行內(nèi)樣式，是優(yōu)先級最高。(所謂行內(nèi)樣式就是在html中直接指定的樣式）
二看：ID選擇器的數(shù)量越多，越優(yōu)先顯示
三看：看類，偽類，屬性選擇器的數(shù)量，越多越優(yōu)先顯示
四看：看元素，偽元素選擇器的數(shù)量。
五看：在以上全部相等的情況下，最后樣式的會覆蓋掉先前的樣式。

舉例：
#wrapper #content{}和 #wrapper p{}同時作用的時候， 第一個優(yōu)先顯示，因?yàn)橛袃蓚€ID選擇器

所以有的時候，為了防止有層疊的現(xiàn)象產(chǎn)生，會多加一個id選擇器或類選擇器，好讓他的優(yōu)先級變高。設(shè)計(jì)的時候，要秉承著一般性樣式優(yōu)先級降低，特殊性樣式要優(yōu)先級升高的原則。

從這里再退回到偽類選擇器的地方。對于鏈接的偽類有五個，他們是有一定的層疊優(yōu)先級的。
順序是：：link，：visited，：hover，：focus，：active。
是不是覺得很難記？

沒關(guān)系，記住這一句話，你就能記住了：lvhfa（你好煩啊）！分別是前面的首字母?？烊?yīng)用幾次，你就完全記住了！

繼承的意思就是：祖先留給孩子的遺產(chǎn)。

在CSS也是這樣，如果后代元素沒有定義樣式，那么會繼承自祖先的樣式。

繼承的優(yōu)先級為空！你可能會想到標(biāo)題元素，如果在主體上設(shè)置字號，而標(biāo)題元素卻好像沒有繼承下來，這是為什么呢？

那是因?yàn)闉g覽器會給默認(rèn)樣式設(shè)置標(biāo)題字號。所以優(yōu)先顯示。

2017.12.02 完成寫作