摘要:后代選擇器后代選擇器又稱(chēng)包含選擇器,用于選擇指定元素的后代元素。這些選擇器既可以是基本選擇器,也可以是一個(gè)復(fù)合選擇器。注意元素選擇器及和屬性選擇器之間沒(méi)有空格。
復(fù)合選擇器是通過(guò)基本選擇器進(jìn)行組合后構(gòu)成的,常用的復(fù)合選擇器有:
交集選擇器
并集選持器
后代選擇器
子元素選擇器
相鄰兄弟選擇器
屬性選擇器
交集選擇器
交集選擇器由兩個(gè)選擇器直接連接構(gòu)成,其中第一個(gè)選擇器必須是元素選擇器,第二個(gè)選擇器必須是類(lèi)選擇器或者 ID 選擇器,例如:div.txt、div#txtID。兩個(gè)選擇器之間必須連續(xù)寫(xiě),不能有空格。交集選擇器選擇的元素必須是由第一個(gè)選擇器指定的元素類(lèi)型,該元素必須包含第二個(gè)選擇器對(duì)應(yīng)的 ID 名或類(lèi)名。交集選擇器選擇的元素的樣式是三個(gè)選擇器樣式,即第一個(gè)選擇器
使用交集元素選擇器設(shè)置樣式的語(yǔ)法如下:
元素選擇器 . 類(lèi)選擇器| #ID 選擇器 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; ... }
語(yǔ)法說(shuō)明:“類(lèi)選擇器| ID 選擇器”表示使用類(lèi)選擇器,或者使用 ID 選擇器。
【示例 2-15】使用交集選擇器設(shè)置樣式。
使用交集選擇器設(shè)置樣式 元素選擇器效果交集選擇器效果類(lèi)選擇器效果
上述 CSS 代碼定義了 div 元素、類(lèi)選擇器 txt 和它們的交集選擇器 div.txt 的樣式。交集選擇器所定義的背景顏色只作用于
從圖 2-15 可看出,交集選擇器所指定對(duì)象的最終樣式是上述 CSS 中定義的三個(gè)選擇器樣式的層疊,有沖突時(shí)將選擇優(yōu)先級(jí)最高的樣式來(lái)執(zhí)行(有關(guān)樣式的優(yōu)先級(jí)的規(guī)定請(qǐng)參見(jiàn) 2.7 節(jié))。
交集選擇器由于會(huì)增加代碼量,會(huì)影響性能且不利于后期維護(hù),所以除了不得已要使用外,一般不推薦使用。
并集選擇器
并集選擇器也叫分組選擇器或群組選擇器,它是由兩個(gè)或兩個(gè)以上的任意選擇器組成的,不同選擇器之間用“,”隔開(kāi),實(shí)現(xiàn)對(duì)多個(gè)選擇器進(jìn)行“集體聲明”。并集選擇器的特點(diǎn)是所設(shè)置的樣式對(duì)并集選擇器中的各個(gè)選擇器都有效。并集選擇器的作用是把不同選擇器的相同樣式抽取出來(lái),然后放到一個(gè)地方作一次性定義,從而簡(jiǎn)化了 CSS 代碼量。
使用交集元素選擇器設(shè)置樣式的語(yǔ)法如下:
選擇器 1, 選擇器 2, 選擇器 3, … { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; ... } 語(yǔ)法說(shuō)明:選擇器的類(lèi)型任意,既可以是基本選擇器,也可以是一個(gè)復(fù)合選擇器。 【示例 2-16】使用并集選擇器設(shè)置樣式。使用并集選擇器設(shè)置樣式 這是 DIV1這是 DIV2這是段落一
這是段落二
這是一個(gè) SPAN
上述 CSS 代碼中共定義了四個(gè)選擇器的樣式。其中,前三個(gè)是元素選擇器,用于定義各類(lèi)元素的樣式,第四個(gè)選擇器:span,.p1,#d1為并集選擇器,用于定義 span、第一個(gè)段落和第一個(gè) div 這三個(gè)元素的公共樣式,即淺灰色背景。我們看到該并集選擇器中包含了元素選擇器、類(lèi)選擇器和 ID 選擇器,這完全符合前面說(shuō)的并集選擇器可以是任意類(lèi)型的選擇器的特點(diǎn)。示例 2-15 的運(yùn)行結(jié)果如圖 2-16 所示。
后代選擇器
后代選擇器又稱(chēng)包含選擇器,用于選擇指定元素的后代元素。使用后代選擇器可以幫助我們更快更確切地找到目標(biāo)元素。
使用后代元素選擇器設(shè)置樣式的語(yǔ)法如下:
選擇器 1 選擇器 2 選擇器 3 … { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; ... }
語(yǔ)法說(shuō)明:位于左邊的選擇器可以包含兩個(gè)或多個(gè)使用空格隔開(kāi)的選擇器,位于后面的選擇器選擇的元素屬于前面選擇器選擇元素的子級(jí)。這些選擇器既可以是基本選擇器,也可以是一個(gè)復(fù)合選擇器。選擇器之間的空格是一種結(jié)合符,按從右到左的方式順序讀選擇器。此時(shí),每個(gè)空格結(jié)合符可以解釋為“××× 作為 ××× 的后代”,例如 div p 表示 p 作為 div 的后代。需注意的是,后代選擇器所選擇的后代元素包括任意嵌套層次的后代,所以 div p 又可解釋為作為 div 后代元素的任意 p 元素。另外,雖然后代選擇器中可以包含任意多個(gè)選擇器,但為了便于閱讀和理解,后代選擇器中包含的選擇器一般最多包含三級(jí)。
【示例 2-17】使用后代選擇器設(shè)置
使用后代選擇器設(shè)置樣式 段落一
段落二
段落三
段落四
段落五
段落六
上述 CSS 代碼中定義了兩個(gè)后代選擇器樣式,其中“#box1 .p1”后代選擇器用于選擇 ID 為 box1 元素中類(lèi)名為 p1 的所有后代元素;“#box2 p”后代選擇器用于選擇 ID 為 box2 的元素中所有類(lèi)型為 p 的后代元素。上述代碼在瀏覽器中的運(yùn)行結(jié)果如圖 2-17 所示
從圖 2-17 中可以看到,“#box1.p1”后代選擇器只選擇了段落一,雖然段落三和段落五的類(lèi)名都是 p1,但由于它們不屬于 #box1 元素的后代,因而沒(méi)有被選擇;而“#box2 p”后代選擇器則只選擇了段落三和段落四,其他段落的類(lèi)型雖然也都是 p,但由于它們不屬于 #box2 的后代,所以也沒(méi)有被選擇。
子元素選擇器
后代選擇器可以選擇某個(gè)元素指定類(lèi)型的所有后代元素,如果只想選擇某個(gè)元素的所有子元素,則需要使用子元素選擇器。
使用子元素選擇器設(shè)置樣式的語(yǔ)法如下:
選擇器 1> 選擇器 2 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; … }
語(yǔ)法說(shuō)明:“>”稱(chēng)為左結(jié)合符,在其左右兩邊可以出現(xiàn)空格,“選擇器 1> 選擇器 2”的含意為“選擇作為選擇器 1 指定元素的所有選擇器 2 指定的子元素”,例如:div>span 表示選擇了 div 元素內(nèi)所有子元素 span。
子元素選擇器中的兩個(gè)選擇器既可以是基本選擇器,也可以是交集選擇器,另外選擇器 1 還可以是后代選擇器。
【示例 2-18】子元素選擇器應(yīng)用示例。
子元素選擇器應(yīng)用示例 這是非常非常 重要 且 關(guān)鍵 的一步。
這是真的非常 重要 且 關(guān)鍵 的一步。
上述 CSS 代碼中的 h1>span 選擇了 h1 元素的所有子元素 span。在第一個(gè) h1 元素中的兩個(gè) span 就是 h1 的子元素。而第二個(gè) h1 中的兩個(gè) span 是 h1 元素中 em 里的子元素,它屬于 h1 元素的子元素的子元素,所以沒(méi)有被選中。因而 CSS 樣式只對(duì)第一個(gè) h1 元素的兩個(gè) span 元素有效,即只有第一行中的“重要”和“關(guān)鍵”這兩個(gè)詞顯示紅色,第二行的這兩個(gè)詞顏色沒(méi)變。上述代碼在 Chrome 瀏覽器中的運(yùn)行結(jié)果如圖 2-18 所示。
相鄰兄弟選擇器
如果需要選擇緊接在某個(gè)元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。相鄰兄弟選擇器的基本語(yǔ)法如下。
選擇器 1+ 選擇器 2 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; … }
語(yǔ)法說(shuō)明:“+”稱(chēng)為相鄰兄弟結(jié)合符,在其左右兩邊可以出現(xiàn)空格,“選擇器 1+ 選擇器 2”的含意為選擇緊接在選擇器 1 指定元素后出現(xiàn)的選擇器 2 指定的元素,且這兩個(gè)元素?fù)碛泄餐母冈?,例如:div+span 表示選擇緊接在 div 元素后出現(xiàn)的 span 元素,其中 div 和 span 兩個(gè)元素?fù)碛泄餐母冈亍?br>【示例 2-19】相鄰兄弟選擇器應(yīng)用示例。
相鄰兄弟選擇器應(yīng)用示例 這是一個(gè)一級(jí)標(biāo)題
這是段落 1。
這是段落 2。
這是段落 3。
上述 CSS 代碼中的 h1+p 選擇了 h1 元素后面的第一個(gè) p,而 p+p 則選擇了第一個(gè) p 元素后面的各個(gè) p 元素,因而第二個(gè)和第三個(gè)段落使用了 p+p 選擇器樣式,而第一個(gè)段落則使用了 h1+p 選擇器樣式。上述代碼在 Chrome 瀏覽器中的運(yùn)行結(jié)果如圖 2-19 所示。
屬性選擇器
在 CSS 中,我們還可以根據(jù)元素的屬性及屬性值來(lái)選擇元素,此時(shí)用到的選擇器稱(chēng)為屬性選擇器。屬性選擇器的使用主要有 2 種形式,基本語(yǔ)法分別如下。
屬性選擇器 1 屬性選擇器 2...{ 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; … } 元素選擇器屬性選擇器 1 屬性選擇器 2... { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; … }
語(yǔ)法說(shuō)明:屬性選擇器的寫(xiě)法是 [ 屬性表達(dá)式 ],其中屬性表達(dá)式可以是一個(gè)屬性名,也可以是“屬性=屬性值”等這樣的表達(dá)式,例如:[tilte] 和 [type="text"] 都是屬性選擇器。屬性選擇器前可以指定某個(gè)元素選擇器,此時(shí)將在指定類(lèi)型的元素中進(jìn)行選擇,例如:img[title] 只能選擇具有 title 屬性的 img 元素。屬性選擇器前也可以使用通配符 ,此時(shí)效果和第一種形式完全一樣,都不限定選擇元素的類(lèi)型,例如:[title] 和 [title] 效果完全一樣,都將選擇具有 title 屬性的所有元素。
注意:元素選擇器及“*”和屬性選擇器之間沒(méi)有空格。另外,可以連續(xù)使用多個(gè)不同的屬性選擇器,此時(shí)將進(jìn)一步縮小元素選擇的范圍,例如 ahref 用于選擇同時(shí)具有 href 和 title 屬性的 a 元素。
常見(jiàn)的屬性選擇器格式如表 2-3 所示。
【示例 2-20】屬性選擇器的應(yīng)用。
屬性選擇器的應(yīng)用 [title] {/* 選擇具有 title 屬性的元素 */ color: #F6F; } a[href][title]{/* 選擇同時(shí)具有 href 和 title 屬性的 a 元素 */ font-size: 36px; } img[alt] {/* 選擇具有 alt 屬性的 img 元素 */ border: 3px #f00 solid; } p[align="center"] {/* 選擇 align 屬性等于 center 的 p 元素 */ color: red; font-weight: bolder; }應(yīng)用屬性選擇器樣式:
Helloworld
返首頁(yè)
段落一
沒(méi)有應(yīng)用屬性選擇器樣式
Helloworld
返首頁(yè)
段落二
上述 CSS 代碼中使用了三個(gè)屬性選擇器,其中 [title] 屬性選擇器選擇了第一個(gè) h3 和第一個(gè) a 元素,這兩個(gè)元素都具有“title”屬性;ahref 屬性選擇器選擇了第一個(gè) a 元素,因?yàn)橹挥兴瑫r(shí)具有 href 和 title 屬性,所以第一個(gè) a 元素同時(shí)具有了 [title] 屬性器和 ahref 屬性選擇器樣式;img[alt] 選擇器通過(guò)前面的 img 元素限定只能選擇圖片對(duì)象,而根據(jù)屬性選擇器,只選擇了第一個(gè) img 元素,因?yàn)橹挥兴啪哂小癮lt”屬性;p[align="center"] 選擇器通過(guò)前面的 p 元素限定了只能選擇段落對(duì)象,根據(jù)屬性選擇器則只能選擇第一個(gè) p 元素,因?yàn)橹挥兴啪哂?align 屬性,且值為“center”。上述代碼在在 Chrome 瀏覽器中的運(yùn)行結(jié)果如圖 2-20 所示。
至此,我們已學(xué)習(xí)了一些常用的基本選擇器和復(fù)合選擇器。下一節(jié)我們來(lái)總結(jié)一下這些選擇器的使用方法。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/100457.html
摘要:每條屬性聲明實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素進(jìn)行某種特定格式的設(shè)置,由一個(gè)屬性和一個(gè)值組成,屬性和值之間使用冒號(hào)連接,不同聲明之間用分號(hào)分隔,所有屬性聲明放到一對(duì)大括號(hào)中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要:標(biāo)簽是最基本的,同時(shí)也是最常用的標(biāo)簽。該標(biāo)簽是一個(gè)雙標(biāo)簽,出現(xiàn)在主體區(qū)域中,主要作為一個(gè)容器標(biāo)簽來(lái)使用,在標(biāo)簽中可以包含除之外的所有主體標(biāo)簽。因此,的主要作用就是用來(lái)對(duì)結(jié)構(gòu)進(jìn)行布局。示例標(biāo)簽的使用上述代碼中,分別創(chuàng)建了兩個(gè)塊級(jí)元素。 showImg(https://segmentfault.com/img/bVbj9Kn?w=900&h=383); 標(biāo)簽是最基本的,同時(shí)也是最常用的標(biāo)...
摘要:上期回顧在上一節(jié)我們已了解前端開(kāi)發(fā)是做什么的,現(xiàn)在的問(wèn)題是,如何才能成為一名合格的前端開(kāi)發(fā)工程師相信這個(gè)問(wèn)題是大家比較關(guān)心的。 showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顧 在上一節(jié)我們已了解前端開(kāi)發(fā)是做什么的,現(xiàn)在的問(wèn)題是,如何才能成為一名合格的前端開(kāi)發(fā)工程師? 相信這個(gè)問(wèn)題是大家比較關(guān)心的。 前端開(kāi)發(fā)工...
摘要:可見(jiàn)對(duì)一個(gè)頁(yè)面正確渲染很重要。和標(biāo)簽對(duì)用于標(biāo)識(shí)頁(yè)面的頭部區(qū)域,和之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。是一個(gè)輔助性標(biāo)簽,對(duì)頁(yè)面可以進(jìn)行很多方面的特性的設(shè)置。當(dāng)頁(yè)面沒(méi)有設(shè)置字符集時(shí),瀏覽器會(huì)使用默認(rèn)的字符編碼顯示。 showImg(https://segmentfault.com/img/bVbjNkI?w=900&h=383); 往期回顧 在 1.2 節(jié)介紹 HTML 語(yǔ)言時(shí)講到:HTML...
摘要:結(jié)合我自己的經(jīng)驗(yàn),我整理了一份全棧工程師進(jìn)階路線圖,給大家參考。乾坤大挪移第一層第一層心法,主要都是基本語(yǔ)法,程序設(shè)計(jì)入門(mén),悟性高者十天半月可成,差一點(diǎn)的到個(gè)月也說(shuō)不準(zhǔn)。 技術(shù)更新日新月異,對(duì)于初入職場(chǎng)的同學(xué)來(lái)說(shuō),經(jīng)常會(huì)困惑該往那個(gè)方向發(fā)展,這一點(diǎn)松哥是深有體會(huì)的。 我剛開(kāi)始學(xué)習(xí) Java 那會(huì),最大的問(wèn)題就是不知道該學(xué)什么,以及學(xué)習(xí)的順序,我相信這也是很多初學(xué)者經(jīng)常面臨的問(wèn)題。?我...
閱讀 832·2023-04-26 00:37
閱讀 719·2021-11-24 09:39
閱讀 2146·2021-11-23 09:51
閱讀 3812·2021-11-22 15:24
閱讀 743·2021-10-19 11:46
閱讀 1876·2019-08-30 13:53
閱讀 2426·2019-08-29 17:28
閱讀 1325·2019-08-29 14:11