有時候在網頁設計中會涉及到很多看上去很繁瑣的設計圖,這時候都會很讓人頭疼,那麼這時候偽類就可以來幫助你解決問題了。
1
doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>
title
>
6head
>
7<
style
type
="text/css"
>
8.box13p
16*19.clearfix
22.left,.content,.right
25.content
28.left::after
31.right::before
34.left-one,.content-one,.right-one
3738
.left-one::after
4142
.content-one::before
45.content-one::after
4849
.right-one::before
5253
54style
>
55<
body
>
56<
div
class
="box"
>
57<
div
class
="left"
>
58<
div
class
="left-one"
>
59<
p>大風來襲不再怕
p>
60<
p>大風來襲不再怕
p>
61div
>
62<
div
class
="left-one"
>
63<
p>大風來襲不再怕
p>
64<
p>大風來襲不再怕
p>
65div
>
66<
div
class
="left-one"
>
67<
p>大風來襲不再怕
p>
68<
p>大風來襲不再怕
p>
69div
>
70div
>
71<
div
class
="content"
>
72<
div
class
="content-one"
>
73<
p>大風來襲不再怕
p>
74<
p>大風來襲不再怕
p>
75div
>
76div
>
77<
div
class
="right"
>
78<
div
class
="right-one"
>
79<
p>大風來襲不再怕
p>
80<
p>大風來襲不再怕
p>
81div
>
82<
div
class
="right-one"
>
83<
p>大風來襲不再怕
p>
84<
p>大風來襲不再怕
p>
85div
>
86<
div
class
="right-one"
>
87<
p>大風來襲不再怕
p>
88<
p>大風來襲不再怕
p>
89div
>
90div
>
91<
div
class
="clearfix"
>
div>
92div
>
93body
>
94html
>
效果如下圖所示:
如何使用 CSS3 偽類
在 這些新的 css3 偽類之前,先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。在 1996 年,當 css1 的規範完成後,一些偽類選擇器已被囊括在內,其中許多你幾乎每天都在使用。例如 這些狀態都可以被應用到某個元素,通常是以 a 偽類名 css2 來了和 lang 新偽類...
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...