CSS 元素選擇器

2021-09-01 17:38:34 字數 781 閱讀 2141

最常見的 css 選擇器是元素選擇器。換句話說,文件的元素就是最基本的選擇器。

如果設定 html 的樣式,選擇器通常將是某個 html 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html 

h1 h2

親自試一試

可以將某個樣式從乙個元素切換到另乙個元素。

假設您決定將上面的段落文字(而不是 h1 元素)設定為灰色。只需要把 h1 選擇器改為 p:

htmlph2
親自試一試

在 w3c 標準中,元素選擇器又稱為型別選擇器(type selector)。

「型別選擇器匹配文件語言元素型別的名稱。型別選擇器匹配文件樹中該元素型別的每乙個例項。」

下面的規則匹配文件樹中所有 h1 元素:

h1
因此,我們也可以為 xml 文件中的元素設定樣式:

<?xml version="1.0" encoding="iso-8859-1"?><?xml-stylesheet type="text/css" href="note.css"?>george

john

reminder

don't forget the meeting!

note

tofrom

heading

body

檢視效果

通過上面的例子,您可以看到,css 元素選擇器(型別選擇器)可以設定 xml 文件中元素的樣式。。

css 元素選擇器

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

CSS選擇器 偽元素選擇器

css選擇器 偽元素選擇器 偽元素以 開頭,用在選擇器後,用於選擇指定的元素。after選中之後的不存在的節點,可配合content屬性進行內容填充 section h3 after before選中之前的不存在的節點,可配合content屬性進行內容填充 section h3 before fir...

CSS 子元素選擇器

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