CSS3偽類使用方法例項

2021-09-26 22:48:50 字數 2459 閱讀 7090

有時候在網頁設計中會涉及到很多看上去很繁瑣的設計圖,這時候都會很讓人頭疼,那麼這時候偽類就可以來幫助你解決問題了。

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...