杭州web前端培訓
達內杭州文教中心

13732203138

熱門課程

web開發之CSS后代選擇器解析

  • 時間:2019-08-07 14:17
  • 發布:轉載
  • 來源:網絡

本文為大家分享的是web開發中的CSS后代選擇器解析,有興趣的快來看看吧。

CSS 后代選擇器

CSS 屬性選擇器詳解

CSS 子元素選擇器

后代選擇器(descendant selector)又稱為包含選擇器。

后代選擇器可以選擇作為某元素后代的元素。

根據上下文選擇元素

我們可以定義后代選擇器來創建一些規則,使這些規則在某些文檔結構中起作用,而在另外一些結構中不起作用。

舉例來說,如果您希望只對 h1 元素中的 em 元素應用樣式,可以這樣寫:

h1 em {color:red;}

上面這個規則會把作為 h1 元素后代的 em 元素的文本變為 紅色。其他 em 文本(如段落或塊引用中的 em)則不會被這個規則選中:

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

親自試一試

當然,您也可以在 h1 中找到的每個 em 元素上放一個 class 屬性,但是顯然,后代選擇器的效率更高。

語法解釋

在后代選擇器中,規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符(combinator)。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”,但是要求必須從右向左讀選擇器。

因此,h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”。如果要從左向右讀選擇器,可以換成以下說法:“包含 em 的所有 h1 會把以下樣式應用到該 em”。

具體應用

后代選擇器的功能極其強大。有了它,可以使 HTML 中不可能實現的任務成為可能。

假設有一個文檔,其中有一個邊欄,還有一個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈接列表。不能把所有鏈接都設置為藍色,因為這樣一來邊欄中的藍色鏈接都無法看到。

解決方法是使用后代選擇器。在這種情況下,可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性,并把主區的 class 屬性值設置為 maincontent。然后編寫以下樣式:

div.sidebar {background:blue;}

div.maincontent {background:white;}

div.sidebar a:link {color:white;}

div.maincontent a:link {color:blue;}

有關后代選擇器有一個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。

例如,如果寫作 ul em,這個語法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的嵌套層次多深。

因此,ul em 將會選擇以下標記中的所有 em 元素:

<ul>

<li>List item 1

<ol>

<li>List item 1-1</li>

<li>List item 1-2</li>

<li>List item 1-3

<ol>

<li>List item 1-3-1</li>

<li>List item <em>1-3-2</em></li>

<li>List item 1-3-3</li>

</ol>

</li>

<li>List item 1-4</li>

</ol>

</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

以上就是本篇內容的全部了,這一篇web開發中CSS 框模型概述希望可以對各位web開發者來說啟到幫助。更多關于web教程、web培訓類相關知識請關注web培訓官網。

預約申請免費試聽課

怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

上一篇:web開發之CSS派生選擇器的詳解
下一篇:WEB前端開發中標簽的用法和定義匯總

web開發之CSS后代選擇器解析

web開發之CSS派生選擇器的詳解

web前端中的圖像透明的實現方法教程

web開發教程之CSS絕對定位

選擇城市和中心
江西省

貴州省

廣西省

海南省

免费精品国产自在自线