成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端修煉の道 | 你知道哪些復(fù)合選擇器?

Java_oldboy / 2914人閱讀

摘要:后代選擇器后代選擇器又稱(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 的樣式。交集選擇器所定義的背景顏色只作用于

元素。上述代碼在 Chrome 瀏覽器中的運(yùn)行結(jié)果如圖 2-15 所示。

從圖 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

相關(guān)文章

  • 前端修煉 の道 | 帶走進(jìn)迷人的 CSS 世界

    摘要:每條屬性聲明實(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)...

    shiweifu 評(píng)論0 收藏0
  • 前端修煉の道 | <div> 標(biāo)簽簡(jiǎn)介

    摘要:標(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)...

    vvpale 評(píng)論0 收藏0
  • 前端修煉の道 | 如何成為一名合格前端開(kāi)發(fā)工程師?

    摘要:上期回顧在上一節(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ā)工...

    Jackwoo 評(píng)論0 收藏0
  • 前端修煉の道:第一個(gè) HTML 頁(yè)面

    摘要:可見(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...

    JasonZhang 評(píng)論0 收藏0
  • 2019 Java 全棧工程師進(jìn)階路線圖,一定要收藏

    摘要:結(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)題。?我...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<