CSS3學習筆記 之 語言偽類選擇器

2021-06-25 08:07:25 字數 1321 閱讀 8024

語言偽類選擇器對於多語言版本的**來說非常有用,可以根據不同語言版本設定頁面的字型風格。

有兩種方法為文件指定語言,如果使用html5,直接可以設定文件的語言:

另外一種方法就是手工在文件中指定lang屬性,並設定對應的語言值,例如:

e:lang(language) 表示選擇匹配e的所有元素,且匹配元素指定了lang屬性,而且其值為language。

語言偽類選擇器的瀏覽器相容性:需要ie8及以上,所有版本的ff, chrome, safari, 以及opera9.2及以上。

下面通過乙個例子來說明語言偽類選擇器的使用,這個例子用於定義不同語言版本的引文風格。

對於多語言的**,改變引文的不同樣式,例如**還有英語和法語的版本,在法語中引文使用《》包含起來,而不是雙引號。

英語頁面:

wwf's goal is to: 

build a future were people live in harmony with nature

we hope they succeed.

顯示結果:

法語頁面:

wwf's goal is to: 

build a future were people live in harmony with nature

we hope they succeed.

顯示效果:

也可以通過語言偽類選擇器,為不同語言的頁面元素設定不同的樣式,例如不同的文字顏色或者背景顏色和字型字型大小背景等。

英語頁面:

wwf's goal is to: 

build a future were people live in harmony with nature

we hope they succeed.

顯示效果:

法語頁面:

wwf's goal is to: 

build a future were people live in harmony with nature

we hope they succeed.

顯示結果:

CSS3學習筆記 之 結構偽類選擇器

結構偽類選擇器可以根據dom樹中元素的相對關係來匹配特定的元素,其語法如下 選擇器功能描述 e first child 作為父元素的第乙個子元素的元素e。與e nth child 1 等同 e last child 作為父元素的最後乙個元素的元素e,與e nth lat child 1 等同 e r...

css3 選擇器 CSS3新增偽類

css3新增偽類 我們來盤點一下css3新增了哪些偽類?a first of type 選擇器匹配屬於其父元素的特定型別的首個子元素的每個元素。b last of type 選擇器匹配屬於其父元素的特定型別的最後乙個子元素的每個元素。c only of type 選擇器匹配屬於其父元素的特定型別的唯...

css3偽類選擇器

css3偽類選擇器 動態偽類選擇器 他不存在於html中,只有在互動的過程中,才能使用動態偽類選擇器對其進行樣式的渲染 超連結ui元素狀態偽類選擇器 結構偽類選擇器 first child 選擇某個元素的第乙個子元素 last child 選擇某個元素的最後乙個子元素 nth child 選擇某個元...