摘要:選擇器的作用就是將相應(yīng)的元素選擇出來(lái),并為他們應(yīng)用樣式。給別名為孩子穿上黑色西裝選擇器用來(lái)尋找特定的元素。效果圖這里需要注意的就是是完全匹配的,所以即使李老二的屬性有,但沒有成為金色背景的緣故。
題外話
最近看了《精通CSS,高級(jí)web標(biāo)準(zhǔn)解決方案》這本書。所以接下來(lái)的幾篇文章結(jié)合自己的理解,參照本書做一下總結(jié)。
好,廢話不多說(shuō),開始進(jìn)入正題。
CSS的前世今生在很久很久以前,早期的瀏覽器只支持簡(jiǎn)易版本的HTML,使用HTML添加基本的格式和結(jié)構(gòu)。但是隨著web的流行,人們開始不滿足于只有結(jié)構(gòu)和文本的樣式了!!
看一下1999年搜狐的頁(yè)面:
人都是愛美的,所以HTML開始用來(lái)表現(xiàn)頁(yè)面了,這樣一來(lái)就web領(lǐng)域就變得一團(tuán)糟了,試想一下當(dāng)你把所有的樣式都裝在同一個(gè)HTML文檔的時(shí)候,是多么的恐怖。
發(fā)展到了這里,HTML有點(diǎn)跑偏了,貌似HTML并沒有被看作是簡(jiǎn)單的標(biāo)記語(yǔ)言,反而是把表現(xiàn)、布局與內(nèi)容融成了一團(tuán),讓人們看起來(lái)復(fù)雜、混亂、更加易于出錯(cuò)(不僅僅易于出錯(cuò),查錯(cuò)也相當(dāng)困難!)。總之開發(fā)人員避而遠(yuǎn)之,用可視化的編輯器來(lái)代替。這樣下去的結(jié)果就是:連開發(fā)者自己都不知道如何編寫代碼。(所以當(dāng)時(shí)的負(fù)責(zé)web開發(fā)的程序員可能也是蒙圈的狀態(tài))
就在一籌莫展之際,CSS橫空出世!解決了這一問(wèn)題,CSS出現(xiàn)的意義就是:要文檔的內(nèi)容與表現(xiàn)分隔開。這對(duì)于程序員應(yīng)該相當(dāng)熟悉了,內(nèi)容與表現(xiàn)分開的好處就在于:我在多帶帶設(shè)計(jì)內(nèi)容時(shí)候,不用考慮表現(xiàn),在多帶帶實(shí)際表現(xiàn)的時(shí)候,不用過(guò)分的考慮內(nèi)容,這樣下去帶來(lái)的結(jié)果就是:①更加簡(jiǎn)單,架構(gòu)清晰。②修改容易,在一個(gè)地方修改,就會(huì)貫徹到整個(gè)系統(tǒng)。
所以,標(biāo)記(HTML)再一次返璞歸真,天下太平。
我們極力擺脫內(nèi)容與表現(xiàn)重合,所以在以后的設(shè)計(jì)中,盡可能的區(qū)分出內(nèi)容和表現(xiàn)。
為HTML元素命名的時(shí)候,要根據(jù)“它是什么”,而不是“它的外觀是什么"命名。
例如:CSS選擇器 何為選擇器?
如果你想要新聞?lì)愋偷脑乇憩F(xiàn)為紅色。好的命名:news 壞的命名:red 同理leftbottom類似的方位命>名,也是不好的。
答:選擇+容器。(即挑選出來(lái),并放到容器中)
我們之前提到了要把內(nèi)容和表現(xiàn)分離,而選擇器就是實(shí)現(xiàn)這一技術(shù)的重要手段。
如果我們把HTML和CSS開發(fā)的過(guò)程想象成不同人打扮自己的話。
那么HTML就是如圖所示的人,他是一個(gè)結(jié)構(gòu)化的語(yǔ)言,他可以將頁(yè)面分為好幾個(gè)部分,每個(gè)部分又包含了不同的元素。
如:頭部包含頭頂,眼睛,耳朵等等。
那么CSS是什么呢,CSS是裝扮人的東西!!
比如:帽子,眼鏡,外套等等。他的目的就是讓人有不同的風(fēng)格,更好看,也有可能更丑(這取決于不同人的審美)。
CSS選擇器的作用就是將相應(yīng)的元素選擇出來(lái),并為他們應(yīng)用樣式。
比如:把眼睛選擇出來(lái),給他戴上眼鏡;把脖子選擇出來(lái),帶上領(lǐng)帶。
怎么樣,理解了吧!!!
接下來(lái)就讓我們看看有哪些選擇器!
元素選擇器最最普遍的選擇器,也是最簡(jiǎn)單的。只需要元素就可以了
//給h2小帥哥穿上黑色西裝 h2 { color:black; }后代選擇器
用來(lái)尋找特定元素的后代。
//快給div家族的孩子h2穿上黑色西裝。 div h2 { color:black; }類選擇器
用來(lái)尋找特定的類。
//給別名為news孩子穿上黑色西裝 .news { color:black; }ID選擇器
用來(lái)尋找特定ID的元素。
//給ID為header的美女穿上黑色西裝 #header { color:black; }
以上四種選擇器,是最簡(jiǎn)單,也是最常用的幾個(gè)類。可以互相結(jié)合
如:
//選擇類名為news的p元素 p.news { color:red; }偽類選擇器
這個(gè)是什么意思呢?不要只要看到?jīng)]見過(guò)的東西就著急查資料。其實(shí)很簡(jiǎn)單!
聯(lián)想一下:那什么是“偽娘”呢?哈哈哈
偽類:偽裝成類的一種類,他本身不是類。
其中分為以下兩類:
只對(duì)于鏈接a 元素有效的是:a:link a:visited
應(yīng)用于任何一個(gè)元素::hover :active 和:focus 還有:first-child :lang
通用選擇器用*來(lái)表示選擇出所有的元素。
* { padding:0; margin:0; }子選擇器和相鄰孩子選擇器
還記得后代選擇器嗎,用空格表示前面元素的后代,這個(gè)后代是個(gè)很大的概念,兒子算是后代,孫子也是后代......所以就突出兒子選擇器的重要性了!!
用>這個(gè)符號(hào)來(lái)用于兒子選擇器.
“>”:是左邊的地位比右邊的大,所以左邊代表父親,右邊代表兒子。
而相鄰孩子選擇器用“+”,該如何理解呢?
“+”: 一方面是代表兩個(gè)元素是平等的,都處于同一級(jí)別,另一個(gè)是代表著連接的意思,也就是說(shuō)左邊的元素之后的某一個(gè)元素。
例如:
//兒子選擇器,選擇的是nav的兒子li #nav>li { padding:20px; } //相鄰孩子選擇器,選擇的是,和h1同等級(jí)別的,并且在和h1緊鄰的后面的p元素 h1 + p { color:red; }屬性選擇器
根據(jù)某個(gè)屬性值來(lái)尋找元素。用[屬性值]來(lái)表示
可以根據(jù)這個(gè)屬性值搜索出來(lái)很多東西。
先給出html的代碼:
這是我的朋友名單:
預(yù)覽圖
關(guān)于屬性選擇器的匹配問(wè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-開頭的元素(-用來(lái)處理語(yǔ)言編碼)。(把中間的一豎理解為:隔斷墻,后面就是從隔斷墻頭開始的元素。)
注意:這個(gè)必須是整個(gè)單詞,經(jīng)過(guò)本人測(cè)試,val是整個(gè)單詞的時(shí)候,和attr=val效果是一樣的,如果有單詞中有 - ,效果和attr^=val- 一樣的。(注意短橫)
[attr^=val] : 選擇attr屬性的值以val開頭(包括val)的元素。(把^理解為腦袋,就是“頭”了啊。)
[attr$=val] : 選擇attr屬性的值以val結(jié)尾(包括val)的元素。(把$理解為尾巴)
[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。(想一下游戲中的屏蔽系統(tǒng)吧:我草泥馬會(huì)被屏蔽掉 。怎么樣,很形象吧?)
/*上面的代碼省略不寫,和上面一致*/ /*將以my開頭的 class所有元素加粗顯示*/ [class|="my"] { font-weight:bold; } /*其他類似。不再一一列舉*/
最終效果圖:
關(guān)于層疊如果你對(duì)上面所講到的穿衣服印象深刻的話,那么層疊就代表著穿上衣服最后呈現(xiàn)的效果,這個(gè)效果和很多因素有關(guān)。
比如:你媽媽叫你穿秋褲,你雖然不想穿,但是還是得穿上,你覺得太丑,在外面套上了帥氣的牛仔褲,雖然里面有點(diǎn)肥,但是還是很好看。
這一過(guò)程就體現(xiàn)了層疊, 頁(yè)面中最終呈現(xiàn)的效果和不同選擇器的優(yōu)先級(jí)有關(guān),我把這個(gè)總結(jié)成五看,而不是像一些書中的用特殊性的進(jìn)行解釋(我覺得不太適合理解)。
一看:看該樣式是不是行內(nèi)樣式,是優(yōu)先級(jí)最高。(所謂行內(nèi)樣式就是在html中直接指定的樣式)
二看:ID選擇器的數(shù)量越多,越優(yōu)先顯示
三看:看類,偽類,屬性選擇器的數(shù)量,越多越優(yōu)先顯示
四看:看元素,偽元素選擇器的數(shù)量。
五看:在以上全部相等的情況下,最后樣式的會(huì)覆蓋掉先前的樣式。
舉例:
#wrapper #content{}和 #wrapper p{}同時(shí)作用的時(shí)候, 第一個(gè)優(yōu)先顯示,因?yàn)橛袃蓚€(gè)ID選擇器
所以有的時(shí)候,為了防止有層疊的現(xiàn)象產(chǎn)生,會(huì)多加一個(gè)id選擇器或類選擇器,好讓他的優(yōu)先級(jí)變高。設(shè)計(jì)的時(shí)候,要秉承著一般性樣式優(yōu)先級(jí)降低,特殊性樣式要優(yōu)先級(jí)升高的原則。
從這里再退回到偽類選擇器的地方。對(duì)于鏈接的偽類有五個(gè),他們是有一定的層疊優(yōu)先級(jí)的。
順序是::link,:visited,:hover,:focus,:active。
是不是覺得很難記?
沒關(guān)系,記住這一句話,你就能記住了:lvhfa(你好煩啊)!分別是前面的首字母。快去應(yīng)用幾次,你就完全記住了!
關(guān)于繼承繼承的意思就是:祖先留給孩子的遺產(chǎn)。
在CSS也是這樣,如果后代元素沒有定義樣式,那么會(huì)繼承自祖先的樣式。
繼承的優(yōu)先級(jí)為空!你可能會(huì)想到標(biāo)題元素,如果在主體上設(shè)置字號(hào),而標(biāo)題元素卻好像沒有繼承下來(lái),這是為什么呢?
那是因?yàn)闉g覽器會(huì)給默認(rèn)樣式設(shè)置標(biāo)題字號(hào)。所以優(yōu)先顯示。
更新情況2017.12.02 完成寫作
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/112875.html
摘要:選擇器的作用就是將相應(yīng)的元素選擇出來(lái),并為他們應(yīng)用樣式。給別名為孩子穿上黑色西裝選擇器用來(lái)尋找特定的元素。效果圖這里需要注意的就是是完全匹配的,所以即使李老二的屬性有,但沒有成為金色背景的緣故。 題外話 最近看了《精通CSS,高級(jí)web標(biāo)準(zhǔn)解決方案》這本書。所以接下來(lái)的幾篇文章結(jié)合自己的理解,參照本書做一下總結(jié)。 好,廢話不多說(shuō),開始進(jìn)入正題。 CSS的前世今生 在很久很久以前,早期的...
摘要:接上一篇瀏覽器渲染的那些事一繼續(xù)說(shuō)。哈希表的選擇器各不相同,包括,標(biāo)記名稱等。例如,如果選擇器是,就把規(guī)則放入的哈希表中還有一種通用哈希表,適合不屬于上述類別的規(guī)則。 接上一篇瀏覽器渲染的那些事(一)繼續(xù)說(shuō)。 構(gòu)建呈現(xiàn)樹 Render Tree/Frame Tree 渲染的流程: 在這部分我們來(lái)講一下構(gòu)建Render Tree的過(guò)程。呈現(xiàn)樹主要是負(fù)責(zé)布局并將自身及其子元素繪制出來(lái)。We...
摘要:接上一篇瀏覽器渲染的那些事一繼續(xù)說(shuō)。哈希表的選擇器各不相同,包括,標(biāo)記名稱等。例如,如果選擇器是,就把規(guī)則放入的哈希表中還有一種通用哈希表,適合不屬于上述類別的規(guī)則。 接上一篇瀏覽器渲染的那些事(一)繼續(xù)說(shuō)。 構(gòu)建呈現(xiàn)樹 Render Tree/Frame Tree 渲染的流程: 在這部分我們來(lái)講一下構(gòu)建Render Tree的過(guò)程。呈現(xiàn)樹主要是負(fù)責(zé)布局并將自身及其子元素繪制出來(lái)。We...
摘要:接上一篇瀏覽器渲染的那些事一繼續(xù)說(shuō)。哈希表的選擇器各不相同,包括,標(biāo)記名稱等。例如,如果選擇器是,就把規(guī)則放入的哈希表中還有一種通用哈希表,適合不屬于上述類別的規(guī)則。 接上一篇瀏覽器渲染的那些事(一)繼續(xù)說(shuō)。 構(gòu)建呈現(xiàn)樹 Render Tree/Frame Tree 渲染的流程: 在這部分我們來(lái)講一下構(gòu)建Render Tree的過(guò)程。呈現(xiàn)樹主要是負(fù)責(zé)布局并將自身及其子元素繪制出來(lái)。We...
閱讀 3937·2021-11-22 09:34
閱讀 1506·2021-11-04 16:10
閱讀 1739·2021-10-11 10:59
閱讀 3286·2019-08-30 15:44
閱讀 2049·2019-08-30 13:17
閱讀 3459·2019-08-30 11:05
閱讀 756·2019-08-29 14:02
閱讀 2631·2019-08-26 13:34