CSS 三十一 子元素選擇器

2021-10-24 11:51:51 字數 773 閱讀 4030

與後代選擇器相比,子元素選擇器(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 屬性。

十一,偽元素選擇器

一,區別 偽元素選擇器 選擇部分內容 偽類選擇器 選擇元素整體 二,偽元素選擇器屬性 部分瀏覽器可以識別單冒號,比如before,after,但是不建議這麼使用 1,selection 選擇指定元素中被使用者選中的內容 2,before 可以在內容之前插入新內容 3,after 可以在內容之後插入新...

CSS 元素選擇器

最常見的 css 選擇器是元素選擇器。換句話說,文件的元素就是最基本的選擇器。如果設定 html 的樣式,選擇器通常將是某個 html 元素,比如 p h1 em a,甚至可以是 html 本身 html h1 h2親自試一試 可以將某個樣式從乙個元素切換到另乙個元素。假設您決定將上面的段落文字 而...

css 元素選擇器

子元素選擇器 h1 strong 這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色,但是第二個 h1 中的 strong 不受影響 後代選擇器 descendant selector 又稱為包含選擇器 h1 em 上面這個規則會把作為 h1 元素後代的 em 元素的文字變為 紅色。其...