交集選擇器由兩個(gè)選擇器直接連接構(gòu)成,其中第一個(gè)選擇器必須是元素選擇器,第二個(gè)選擇器必須是類選擇器或者 ID 選擇器,兩個(gè)選擇器之間必須連續(xù)寫,不能有空格。
交集選擇器選擇的元素必須是由第一個(gè)選擇器指定的元素類型,該元素必須包含第二個(gè)選擇器對(duì)應(yīng)的 ID 名或類名。交集選擇器選擇的元素的樣式是三個(gè)選擇器樣式,即第一個(gè)選擇器;
語(yǔ)法:
元素選擇器 . 類選擇器| #ID 選擇器 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
語(yǔ)法說(shuō)明:“類選擇器| ID 選擇器”表示使用類選擇器,或者使用 ID 選擇器。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用交集選擇器設(shè)置樣式 </title> <style> /* 元素選擇器設(shè)置邊框和下外邊距樣式 */ div { border: 5px solid red; margin-bottom:20px; } /* 交集選擇器設(shè)置背景顏色 */ div.txt { background:#33FFCC; } /* 類選擇器設(shè)置字體格式 */ .txt { font-style:italic; } </style> </head> <body> <div> 元素選擇器效果 </div> <div class="txt"> 交集選擇器效果 </div> <span class="txt"> 類選擇器效果 </p> </body> </html>
并集選擇器也叫分組選擇器或群組選擇器,它是由兩個(gè)或兩個(gè)以上的任意選擇器組成的,不同選擇器之間用“,”隔開,實(shí)現(xiàn)對(duì)多個(gè)選擇器進(jìn)行“集體聲明”。
并集選擇器的特點(diǎn)是所設(shè)置的樣式對(duì)并集選擇器中的各個(gè)選擇器都有效。
并集選擇器的作用是把不同選擇器的相同樣式抽取出來(lái),然后放到一個(gè)地方作一次性定義,從而簡(jiǎn)化了 CSS 代碼量。
語(yǔ)法:
選擇器 1, 選擇器 2, 選擇器 3, { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
語(yǔ)法說(shuō)明:選擇器的類型任意,既可以是基本選擇器,也可以是一個(gè)復(fù)合選擇器。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用并集選擇器設(shè)置樣式 </title> <style> div { margin-bottom:10px; border:3px solid red; } span { font-size:26px; } p { font-style:italic; } /* 使用并集選擇器設(shè)置元素的公共樣式 */ span, .p1, #d1 { background:#CCC; } </style> </head> <body> <div id="d1"> 這是 DIV1</div> <div> 這是 DIV2</div> <p class="p1"> 這是段落一 </p> <p> 這是段落二 </p> <span> 這是一個(gè) SPAN</div> </body> </html>
后代選擇器又稱包含選擇器,用于選擇指定元素的后代元素。使用后代選擇器可以幫助我們更快更確切地找到目標(biāo)元素。
語(yǔ)法:
選擇器 1 選擇器 2 選擇器 3 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用后代選擇器設(shè)置樣式 </title> <style> #box1 .p1 { /* 后代選擇器 */ background:#CCC; } #box2 p { /* 后代選擇器 */ background:#CFC; } </style> </head> <body> <div id="box1"> <p class="p1"> 段落一 </p> <p class="p2"> 段落二 </p> </div> <div id="box2"> <p class="p1"> 段落三 </p> <p> 段落四 </p> </div> <p class="p1"> 段落五 </p> <p> 段落六 </p> </body> </html>
后代選擇器可以選擇某個(gè)元素指定類型的所有后代元素,如果只想選擇某個(gè)元素的所有子元素,則需要使用子元素選擇器。
語(yǔ)法:
選擇器 1> 選擇器 2 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
語(yǔ)法說(shuō)明:“>”稱為左結(jié)合符,在其左右兩邊可以出現(xiàn)空格,“選擇器 1> 選擇器 2”的含意為“選擇作為選擇器 1 指定元素的所有選擇器 2 指定的子元素”.
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 子元素選擇器應(yīng)用示例 </title> <style> h1>span { color:red; } </style> </head> <body> <h1> 這是非常非常 <span> 重要 </span> 且 <span> 關(guān)鍵 </span> 的一步。</h1> <h1> 這是真的非常 <em><span> 重要 </span> 且 <span> 關(guān)鍵 </span></em> 的一步。</h1> </body> </html>
如果需要選擇緊接在某個(gè)元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。
語(yǔ)法:
選擇器 1+ 選擇器 2 { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 相鄰兄弟選擇器應(yīng)用示例 </title> <style> h1+p { color:red; font-weight:bold; margin-top:50px; } p+p{ color:blue; text-decoration:underline; } </style> </head> <body> <h1> 這是一個(gè)一級(jí)標(biāo)題 </h1> <p> 這是段落 1。</p> <p> 這是段落 2。</p> <p> 這是段落 3。</p> </body> </html>
在 CSS 中,我們還可以根據(jù)元素的屬性及屬性值來(lái)選擇元素,此時(shí)用到的選擇器稱為屬性選擇器。屬性選擇器的使用主要有 2 種形式,
語(yǔ)法:
屬性選擇器 1 屬性選擇器 2...{ 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; } 元素選擇器屬性選擇器 1 屬性選擇器 2... { 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; }
語(yǔ)法說(shuō)明:屬性選擇器的寫法是 [ 屬性表達(dá)式 ],其中屬性表達(dá)式可以是一個(gè)屬性名,也可以是“屬性=屬性值”等這樣的表達(dá)式.
屬性選擇器的應(yīng)用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 屬性選擇器的應(yīng)用 </title <style> [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; } </style> </head> <body> <h2> 應(yīng)用屬性選擇器樣式:</h2> <h3 title="Helloworld">Helloworld</h3> <a title=" 首頁(yè) "href="#"> 返首頁(yè) </a><br/><br/> <img src="miaov.jpg" alt="logo" /> <p align="center"> 段落一 </p> <hr /> <h2> 沒(méi)有應(yīng)用屬性選擇器樣式 <h3>Helloworld</h3> <a href="#"> 返首頁(yè) </a><br/><br/> <img src="miaov.jpg"> <p align="right"> 段落二 </p> </body> </html>
到此這篇關(guān)于CSS復(fù)合選擇器的具體使用方法的文章就介紹到這了,更多相關(guān)CSS復(fù)合選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:林芝 萍鄉(xiāng) 延邊 大同 赤峰 泰州 保定 巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS復(fù)合選擇器的具體使用方法》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。