《Web前端開(kāi)發(fā)基礎(chǔ)》課件-視頻3 關(guān)系選擇器_第1頁(yè)
《Web前端開(kāi)發(fā)基礎(chǔ)》課件-視頻3 關(guān)系選擇器_第2頁(yè)
《Web前端開(kāi)發(fā)基礎(chǔ)》課件-視頻3 關(guān)系選擇器_第3頁(yè)
《Web前端開(kāi)發(fā)基礎(chǔ)》課件-視頻3 關(guān)系選擇器_第4頁(yè)
《Web前端開(kāi)發(fā)基礎(chǔ)》課件-視頻3 關(guān)系選擇器_第5頁(yè)
已閱讀5頁(yè)，還剩16頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

CSS基礎(chǔ)

--關(guān)系選擇器01后代選擇器子元素選擇器02目錄關(guān)系選擇器是依據(jù)元素在其位置的上下文關(guān)系進(jìn)行選擇，也叫做派生選擇器、父子選擇器，在CSS1.0稱作上下文選擇器。比如每個(gè)人在自己的家族中都有其位置：祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒1后代選擇器（1）定義可以選擇其元素后代的元素，后代選擇器中兩個(gè)元素之間的間隔可以是無(wú)限的。祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒爺爺是祖父的后代爸爸是祖父的后代我是祖父的后代兒子也是祖父的后代1后代選擇器（3）語(yǔ)法格式祖先元素后代元素{

屬性:屬性值;

屬性:屬性值;………}祖先元素與后代元素之間是空格隔開(kāi)（2）作用選擇匹配的后代元素，并且匹配的后代元素被包含在匹配的祖先元素內(nèi)1后代選擇器（4）代碼示例<html>

<head>

<title>后代選擇器</title>

<styletype=“text/css”>

pspan{

color:blue;

text-decoration:underline;

}

</style>

</head>

<body>

<p>我是正常的文字</p>

<p><span>我是p標(biāo)簽span標(biāo)簽里的內(nèi)容，是藍(lán)色加下劃線了嗎？</span></p>

<p>

<span>

我是p標(biāo)簽第一個(gè)span標(biāo)簽里的內(nèi)容，是藍(lán)色加下劃線了嗎？

<span>

我是p標(biāo)簽第二個(gè)span標(biāo)簽里的內(nèi)容，是藍(lán)色加下劃線了嗎？

</span>

</span>

</p>

</body>

</html>

p標(biāo)簽是祖先span標(biāo)簽是后代2子元素選擇器（1）定義只能選擇作為某元素子元素的元素。祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒爺爺是祖父的兒子爸爸是爺爺?shù)膬鹤游沂前职值膬鹤觾鹤右彩俏业膬鹤?子元素選擇器父元素>子元素{

屬性:屬性值;

屬性:屬性值;………}（2）作用選擇匹配的子元素，只有上下一級(jí)關(guān)系。（3）語(yǔ)法格式父元素與子元素之間是>隔開(kāi)（4）代碼示例2子元素選擇器<html>

<head>

<title>子元素選擇器</title>

<styletype="text/css">

ul>li{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<ul>

<li>新聞一

<ul>

<li>11月1號(hào)</li>

<li>11月2號(hào)</li>

</ul>

</li>

<li>新聞二

<ol>

<li>12月1日</li>

<li>12月2日</li>

</ol>

</li>

新聞三

</ul>

<ol>

<li>新聞1</li>

<li>新聞2</li>

</ol>

</body>

</html>與后代選擇器的區(qū)別：最大的不同是元素間隔不同后代選擇器是將該元素作為父元素，它所有的后代元素都是符合條件的，而子元素選擇器只是相對(duì)于父元素來(lái)說(shuō)的第一級(jí)子元素符合條件。

總計(jì)CSS基礎(chǔ)

--關(guān)系選擇器2郭春麗相鄰兄弟選擇器01相鄰兄弟組選擇器02目錄1相鄰兄弟選擇器（1）定義選擇緊接在另一元素后的元素，且二者有相同父元素。祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒爸爸和叔叔是相鄰兄弟關(guān)系，他們有共同的父親1相鄰兄弟選擇器（3）語(yǔ)法格式子元素+子元素{

屬性:屬性值;

屬性:屬性值;………}子元素與子元素之間是+隔開(kāi)（2）作用針對(duì)的是同級(jí)元素，且兩個(gè)元素是相鄰的，擁有相同的父元素。要分清誰(shuí)是參照元素，誰(shuí)是要選擇的元素。1相鄰兄弟選擇器（4）代碼示例<html>

<head>

<title>子元素選擇器</title>

<styletype="text/css">

h1+p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是標(biāo)題</h1>

<p>我和h1是兄弟，是紅色，下劃線，傾斜嗎？</p>

<p>我跟h1不是兄弟</p>

</body>

</html>

h1+p等同于bodyh1+p從后往前：選擇緊接<h1>元素的<p>元素，<h1>和<p>元素包含在<body>從前往后；選擇<body>的后代元素<h1>的相鄰元素<p>2相鄰兄弟組選擇器（1）定義選擇緊接在另一元素后的一組元素，且二者有相同父元素。祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒與大伯相鄰的有爸爸、叔叔，他們都有共同的父親大伯2相鄰兄弟組選擇器子元素~子元素{

屬性:屬性值;

屬性:屬性值;………}（2）作用針對(duì)的是同級(jí)元素，元素間可以不相鄰，但擁有相同的父元素。要分清誰(shuí)是參照元素，誰(shuí)是要選擇的元素。（3）語(yǔ)法格式子元素與子元素之間是~隔開(kāi)（4）代碼示例2相鄰兄弟組選擇器與相鄰兄弟選擇器的區(qū)別：選中的是相鄰的所有兄弟<html>

<head>

<title>子元素選擇器</title>

<styletype="text/css">

h1~p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是標(biāo)題</h1>

<p>我和h1是兄弟，是紅色，下劃線，傾斜嗎？</p>

<p>我跟h1不是兄弟</p>

</body>

</html>

選擇器類型功能描述EF后代選擇器選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)E>F子選擇器選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素E+F相鄰兄弟選擇器選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面E~F相鄰兄弟

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論