《Web前端開發基礎》課件-視頻3 關系選擇器_第1頁
《Web前端開發基礎》課件-視頻3 關系選擇器_第2頁
《Web前端開發基礎》課件-視頻3 關系選擇器_第3頁
《Web前端開發基礎》課件-視頻3 關系選擇器_第4頁
《Web前端開發基礎》課件-視頻3 關系選擇器_第5頁
已閱讀5頁，還剩16頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

CSS基礎

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

屬性:屬性值;

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

<head>

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

<styletype=“text/css”>

pspan{

color:blue;

text-decoration:underline;

}

</style>

</head>

<body>

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

<p><span>我是p標簽span標簽里的內容，是藍色加下劃線了嗎？</span></p>

<p>

<span>

我是p標簽第一個span標簽里的內容，是藍色加下劃線了嗎？

<span>

我是p標簽第二個span標簽里的內容，是藍色加下劃線了嗎？

</span>

</span>

</p>

</body>

</html>

p標簽是祖先span標簽是后代2子元素選擇器（1）定義只能選擇作為某元素子元素的元素。祖父爺爺爸爸我兒子叔叔大哥二爺堂伯大堂哥二堂哥堂妹女兒爺爺是祖父的兒子爸爸是爺爺的兒子我是爸爸的兒子兒子也是我的兒子2子元素選擇器父元素>子元素{

屬性:屬性值;

屬性:屬性值;………}（2）作用選擇匹配的子元素，只有上下一級關系。（3）語法格式父元素與子元素之間是>隔開（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號</li>

<li>11月2號</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>與后代選擇器的區別：最大的不同是元素間隔不同后代選擇器是將該元素作為父元素，它所有的后代元素都是符合條件的，而子元素選擇器只是相對于父元素來說的第一級子元素符合條件。

總計CSS基礎

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

屬性:屬性值;

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

<head>

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

<styletype="text/css">

h1+p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是標題</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）作用針對的是同級元素，元素間可以不相鄰，但擁有相同的父元素。要分清誰是參照元素，誰是要選擇的元素。（3）語法格式子元素與子元素之間是~隔開（4）代碼示例2相鄰兄弟組選擇器與相鄰兄弟選擇器的區別：選中的是相鄰的所有兄弟<html>

<head>

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

<styletype="text/css">

h1~p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是標題</h1>

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

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

</body>

</html>

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

溫馨提示

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

評論

0/150

提交評論