CSS選擇器、層疊、繼承的那些事
題外話
最近看了《精通CSS,高級web標準解決方案》,這本書。所以接下來的幾篇文章結合自己的理解,參照本書做一下總結。
目前按照這個回答學習前端中:零基礎的前端開發初學者應如何系統地學習? - 張帥的回答 - 知乎
https://www.zhihu.com/question/19834302/answer/13108148好,廢話不多說,開始進入正題。
CSS的前世今生
在很久很久以前,早期的瀏覽器只支持簡易版本的HTML,使用HTML添加基本的格式和結構。但是隨著web的流行,人們開始不滿足於只有結構和文本的樣式了!!人都是愛美的,所以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;}
偽類選擇器
這個是什麼意思呢?不要只要看到沒見過的東西就著急查資料。其實很簡單!
聯想一下:那什麼是「偽娘」呢?哈哈哈
偽類:偽裝成類的一種類,他本身不是類。
- 只對於鏈接a 元素有效的是:a:link a:visited
- 應用於任何一個元素::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;}/*其他類似。不再一一列舉*/
最終效果圖:
關於層疊
如果你對上面所講到的穿衣服印象深刻的話,那麼層疊就代表著穿上衣服最後呈現的效果,這個效果和很多因素有關。
比如:你媽媽叫你穿秋褲,你雖然不想穿,但是還是得穿上,你覺得太丑,在外面套上了帥氣的牛仔褲,雖然裡面有點肥,但是還是很好看。
這一過程就體現了層疊, 頁面中最終呈現的效果和不同選擇器的優先順序有關,我把這個總結成五看,而不是像一些書中的用特殊性的進行解釋(我覺得不太適合理解)。
一看:看該樣式是不是行內樣式,是優先順序最高。
二看:ID選擇器的數量越多,越優先顯示
三看:看類,偽類,屬性選擇器的數量,越多越優先顯示
四看:看元素,偽元素選擇器的數量。
五看:在以上全部相等的情況下,最後樣式的會覆蓋掉先前的樣式。
??:#wrapper #content{}和 #wrapper p{} 第一個優先顯示,因為有兩個ID選擇器
所以有的時候,為了防止有層疊的現象產生,會多加一個id選擇器或類選擇器,好讓他的優先順序變高。設計的時候,要秉承著一般性樣式優先順序降低,特殊性樣式要優先順序升高的原則。
從這裡再退回到偽類選擇器的地方。對於鏈接的偽類有五個,他們是有一定的層疊優先順序的。
順序是::link,:visited,:hover,:focus,:active。
是不是覺得很難記?
沒關係,記住這一句話,你就能記住了:lv(你)好煩啊!分別是前面的首字母。快去應用幾次,你就完全記住了!
關於繼承
繼承的意思就是:祖先留給孩子的遺產。
在CSS也是這樣,如果後代元素沒有定義樣式,那麼會繼承自祖先的樣式。
繼承的優先順序為空!一個特殊的地方就是標題元素,如果在主體上設置字型大小,而標題元素卻好像沒有繼承下來,那是因為瀏覽器會給默認樣式設置標題字型大小。所以優先顯示。
更新情況
2017.12.02 完成寫作
推薦閱讀:
※前端設計建議多用 ul dt dl 等元素,少用 div 嗎?
※HTML+CSS有哪些常用的居中方法?
※CSS3 彈性盒布局模型與響應式100%布局的區別?