如何使用 CSS3 偽類

2021-06-20 02:33:30 字數 1117 閱讀 7107

在**這些新的 css3 偽類之前,先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。

在 1996 年,當 css1 的規範完成後,一些偽類選擇器已被囊括在內,其中許多你幾乎每天都在使用。例如:

這些狀態都可以被應用到某個元素,通常是以「a:偽類名」

css2 來了和:lang()新偽類。

:lang

有許多種表示文件語言型別的方法,如果你使用 html5,很可能會直接在 doctype 宣告之後放置 語句(指定本地語種)。當然,你也可以使用:lang(en)偽類來修飾頁面元素,對於語言動態變化的情況,這將非常有用。

:first-child

您可能已經在文件中使用:first-child屬性。它通常用於新增或刪除列表中第乙個元素的上邊框。奇怪的是,卻沒有:last-child這樣的偽類與之對應。於是不得等到 css3 規範的對這兩個兄弟偽類的支援。

為何使用偽類?

偽類如此實用的原因在於它們允許動態地設定內容樣式。比如上面的例子,我們能夠描述當使用者與鏈結進行互動時,鏈結該如何呈現樣式。正如我們看到的,新的偽類允許我們根據元素在文件中的位置或狀態,動態地設定其樣式。

w3c 是 css 之家

現在我們一起**看看如何使用這 16 個新偽類選擇器。我會使用和 w3c 相同的識別符號來命名 css 類,比如e代表元素(element),n表示數字(number),s表示選擇器(selector)。

示例**

大部分新選擇器都會給出參考示例,以便直觀地看到**呈現效果。這裡會涉及一張適用於 iphone 並且使用了 css3 偽類的表單。

文章**

CSS3 新增偽類

p first of type 父元素中第乙個p子元素 p lastt of type 父元素中最後乙個p子元素 p only of type 父元素中唯一乙個p子元素 p nth of type n 父元素中第n個p型別的p元素 p nth last of type n 父元素中倒數第n個p型別的...

CSS3 新增偽類

p first of type 選擇屬於其父元素的首個 元素的每個 元素。p last of type 選擇屬於其父元素的最後 元素的每個 元素。p only of type 選擇屬於其父元素唯一的 元素的每個 元素。p only child 選擇屬於其父元素的唯一子元素的每個 元素。p nth c...

CSS3新增偽類

p last of type 選擇其父元素的最後的乙個p元素 p last child 選擇其父元素的最後子元素 一定是p才行 p first of type 選擇其父元素的首個p元素 p first child 選擇其父元素的首個p元素 一定是p才行 p only child 選擇其父元素的只有乙...