包含選擇與子物件選擇符的區別

2021-06-05 13:31:02 字數 988 閱讀 8071

相信會進來看這篇文章的人,都對css選擇符這個名詞不陌生了。css為我們提供了很多選擇符,這使得我們可以根據自己的需要選擇適合的選擇符來進行樣式的構造。

在眾多的選擇符裡,相信大家用的最多,最熟悉的就是id選擇符,類選擇符及包含選擇符等常用的選擇符。然後對於一些如屬性選擇符,相鄰選擇符,子物件選擇符可能就稍微有點陌生了,這當然也是有原因的,因為ie6及以下的瀏覽器並不支援這幾個選擇符,而大多數從事這方面工作的技術人員,多數時候還是主要考慮佔據著瀏覽器市場大半壁江山的ie6,於是對這些ie6的非親派不熟悉也成了乙個沒辦法的必然。

在ie7,甚至是ie8,firefox,opera,safari等慢慢蠶食ie6市場的今天,那些以往不大常用的選擇符也逐漸開始被應用起來。比如呆會要講到的子物件選擇符。

要講子物件選擇符,當然得順帶講一下包含選擇符,因為這兩者之間有著共同之處:

body p

這是乙個最簡單的包含選擇符,它表達的意思是所有body裡面的p都將以紅色的字顯示。

我們再來看乙個子物件選擇符的例子:

body>p

這是乙個子物件選擇符,意思是所有body裡面的「子物件」p都將以紅色的字顯示。

以同一段html為例,分別應用以上兩段樣式:

">

">

傳說中的測試

傳說中的測試

傳說中的測試

傳說中的測試

包含選擇符的效果為:

子物件選擇符的效果:

從圖一和圖二上我們可以看出,包含選擇符定義的樣式應用到了body下的所有p元素上;而子物件選擇符定義的樣式只應用到body下的第一和第三個p元素上,這是因為第二和第四個p元素並非body的兒子,而是它的孫子。

由此可以見包含選擇符的深度和廣度超過子物件選擇符;而子物件選擇符的針對性和唯一性比包含選擇符強。大家可以根據實際情況選擇選擇何種選擇符來達到自己的目的。

[本日誌由 飄零霧雨 於 2008-05-21 11:12 pm 編輯]    

包含選擇與子物件選擇符的區別

包含選擇符的寫法 body p 意思是body下所有的p元素的字都顯示紅色 子物件選擇符的寫法 body p 意思是body下的子元素的字都顯示紅色 如果還是是理解的話,那就來看個例子最實際了。傳說中的測試 傳說中的測試 傳說中的測試 傳說中的測試 對於上面這段 使用包含選擇符時的結果是 使用子物件...

css裡面包含選擇符與子對像選擇符 的區別

舉個例子 要定義li的樣式,用包含選擇符,你寫成 div li 沒有問題 若用子選擇符,你只能寫成 ul li 不能寫成 div li 因為div和li非 父子關係 而是 祖孫關係 子物件提供了更精細的控制 由此可以見包含選擇符的深度和廣度超過子物件選擇符 而子物件選擇符的針對性和唯一性比包含選擇符...

CSS子選擇符

css子選擇符也可以稱為子物件選擇符 子選擇器等,主要用於定義某個元素中子元素物件的樣式,無法定義子元素以外的物件。子選擇器可以讓我們指定要的是哪個父標籤的哪個子標籤。也就是說,子選擇器只對元素的子元素生效,而不會影響到其它元素的後代元素。所謂子元素,類似於下面的格式 子元素的格式 strong元素...