CSS的子選擇器與後代選擇器的區別

2021-09-02 04:21:13 字數 443 閱讀 4937

子選擇器

還有乙個比較有用的選擇器子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側**編輯器中的**:

.food>li

這行**會使class名為food下的子元素li(水果、蔬菜)加入紅色實線邊框。 蔬菜

.first  span

這行**會使第一段文字內容中的「膽小如鼠」字型顏色變為紅色。

請注意這個選擇器與子選擇器的區別,子選擇器(child selector)僅是指它的直接後代,或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇,而子選擇器是通過「>」進行選擇。

總結:>作用於元素的第一代後代,空格作用於元素的所有後代。

舉例:.food li{

border:1px solid red;/*新增邊框樣式(粗細為1px, 顏色為紅色的實線)*/蔬菜

CSS的子選擇器與後代選擇器的區別

於 food li 這行 會使class名為food下的子元素 第一子代 li 水果 蔬菜 加入紅色實線邊框。first span 這行 會使class名為first下的 所有後代 span標籤內的字型顏色變為紅色。請注意這個選擇器與子選擇器的區別,子選擇器 child selector 僅是指它的...

CSS的子選擇器與後代選擇器的區別

於 food li 這行 會使class名為food下的子元素 第一子代 li 水果 蔬菜 加入紅色實線邊框。first span 這行 會使class名為first下的 所有後代 span標籤內的字型顏色變為紅色。請注意這個選擇器與子選擇器的區別,子選擇器 child selector 僅是指它的...

css後代選擇器和子選擇器的區別

點評 css後代選擇器和子選擇器的區別 用法不同,相容性,所達到的效果不同等等,需要了解的朋友可以參考下1.用法不同 比如要找div的class名為con中p標籤,子代選擇器用法 div.con p 後代選擇器 con p 2.相容性 ie6不支援子代選擇器 3.所達到的效果不同 看下圖用子代選擇器...