css3 iconfont偽類選擇器的使用

2021-10-10 00:06:09 字數 1568 閱讀 7600

css的iconfont使用有三種方式,第一種方式是unicode,第二種方式是fontclass,第三種方式是symbol。在介紹iconfont偽類選擇器的使用之前,我們來了解下iconfont的三種css表達方式。關於這三種表示方法在iconfont中都有簡介。鏈結在這iconfont幫助文件

斜體樣式筆者喜斜體樣式歡直接引用例子,所以花裡胡哨的表達就算了。

html**如下

doctype

html

>

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

head

>

>

@font-face

.iconfont

.icon-xianxingbenzivg:before

.icon-xianxingchizi:before

.icon-xianxingboshimao:before

.icon-xianxingdayinji:before

.icon-xianxingdiannao:before

divdiv::after

style

>

>

>

div>

body

>

html

>

@font-face…那部分是宣告

.iconfont 是定義

::after{}是偽類選擇器

只要寫div部分和div::after這部分即可

注:::after其實就是在父親內容的後面,而同樣的::before是父親內容的前面,而這裡所寫的div::after中的div即為父親。值得注意的是,這裡所說的前面就是二維平面上的左中右,也就是前中後。

另外值得注意的是,在書寫偽類選擇器時,

必須要寫屬性content='\e67d'對所選用的字型圖示要寫font-family:'iconfont'

注:content='\e67d'中的\e67d則是所選擇的字型圖示的unicode編碼

綜述:基本上css**直接複製iconfont.css中的**即可,然後自己寫偽類選擇器中content屬性和font-family即可**

CSS3 偽元素和偽類

css偽類和偽元素的區別,在css3中,實際上的偽元素應該只有 before和 after兩個了,這兩個元素是實際存在在dom中的,而類本身就是表示元素的狀態,所以偽類應該也是為了表示元素的狀態的。在css3中,可以直接用 還是 來區分偽類和為元素了。由於偽類主要是表示元素的狀態,那麼偽類的主要功能...

css3 偽元素和偽類

1,定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...

css 3鏈結偽類與動態偽類

鏈結偽類link 表示作為超連結,並指向乙個未訪問的位址的所有錨 鏈結偽類不可以加在div上 點我點我點我 我是div啦 view code 點我點我點我 view code 可以利用target寫乙個div切換 div1 div2 div3 div1 div2 div3 view code 動態偽...