CSS 子元素選擇器

2021-06-21 21:23:14 字數 652 閱讀 2069

與後代選擇器相比,子元素選擇器(child selectors)只能選擇作為某元素子元素的元素。

如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器(child selector)。

例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:

h1 > strong
這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色,但是第二個 h1 中的 strong 不受影響:

親自試一試  

您應該已經注意到了,子選擇器使用了大於號(子結合符)。

子結合符兩邊可以有空白符,這是可選的。因此,以下寫法都沒有問題:

h1 > strong

h1> strong

h1 >strong

h1>strong

如果從右向左讀,選擇器 h1 > strong 可以解釋為「選擇作為 h1 元素子元素的所有 strong 元素」。

請看下面這個選擇器:

table.company td > p
上面的選擇器會選擇作為 td 元素子元素的所有 p 元素,這個 td 元素本身從 table 元素繼承,該 table 元素有乙個包含 company 的 class 屬性。

CSS 子元素選擇器

與後代選擇器相比,子元素選擇器 child selectors 只能選擇作為某元素子元素的元素。如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器 child selector 例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫 ...

CSS後代選擇器 子元素選擇器 相鄰兄弟選擇器

後代選擇器 後代選擇器 descendant selector 又稱為包含選擇器。後台選擇器可以選擇作為某元素後代的元素。例子 如果只希望h1元素中的em元素應用樣式,可以這樣寫 em元素 強調文字 h1 em this is a important paragraph.注意 如果寫作ul em,這...

css後代選擇器,相鄰兄弟選擇器,子元素選擇器

後代選擇器 element element 例 div p 將會選中div元素中的p元素 相鄰兄弟選擇器 element element 例 div p 將會選中div元素塊結束後緊跟著的p 元素,即形為.的p元素會被選中 子元素選擇器 element element 例 div p 當div是p的...