範仁義css3課程 38 偽元素選擇器

2022-03-23 21:44:17 字數 1506 閱讀 8829

偽元素選擇器中的偽元素相當於dom中不存在的元素,僅僅是css中用來渲染,新增一些特殊效果的,比如p::before,選擇p標籤(真元素)前面的假元素(偽元素,p標籤前面沒有元素,只是假設有)比如:before、:after、:first-letter、:first-line

1、:before

:before 選擇器向選定的元素前插入內容。

使用content 屬性來指定要插入的內容。

p:before

2、:after:after 選擇器向選定的元素之後插入內容。

使用content 屬性來指定要插入的內容。

p:after

:first-letter選擇器用來指定元素第乙個字母的樣式

p:first-letter

:first-line選擇器用來指定選擇器第一行的樣式。

>偽元素選擇器

title

>

6<

style

>7/*

元素選擇器*/8

p11/*偽元素選擇器

*/12

p::before

16p::after

20a:before

24/*

div:first-letter

*/28

div:first-line

31style

>

32head

>

33<

body

>

3452

53<

p>p標籤

p>

54<

a href

="">a標籤

a>

55<

div>

偽元素選擇器 用單冒號(:)和雙冒號(::)都可以,推薦使用雙冒號,和偽類選擇器做區分

56在css3以前,偽類和偽元素都是使用的單冒號(:),只不過在css3的時候,w3c為了區分偽類和偽元素

57 css3中的偽類就是單冒號(:),偽元素就是雙冒號(:)

div>

58body

>

59html

>

範仁義css3課程 14 顏色

設定color的值為transparent即可,例如color transparent用opacity屬性,屬性值在0.0到1.0範圍內,0表示透明,1表示不透明,比如 opacity 0.5 顏色值縮寫 關於顏色的css樣式也是可以縮寫的,當你設定的顏色是16進製制的色彩值時,如果每兩位的值相同,...

範仁義css3課程 10 內邊距

內邊距用padding屬性來設定,例如padding 25px 也可以用padding left right top bottom 分別設定四個邊的內邊距。padding屬性非常常用。css padding 填充 是乙個簡寫屬性,定義元素邊框與元素內容之間的空間,即上下左右的內邊距。padding ...

範仁義css3課程 37 偽類選擇器

偽類選擇器中的偽類是乙個概念上的類,不是我們定義的,是抽象的。如a hover,選擇a標籤 元素選擇器 中具有滑鼠懸停類的所有元素比如 link visited hover active focus在styles裡面的 hov force element state 裡面,如果我們想看 hover,...