before: 偽元素選擇器用于在某個元素之前插入一些內容

偽類選擇器:before使用content屬性插入字符、屬性插入圖片

css3

.p_before:before {

content: 'H';

color: #01B4EE;

}

.p_beforeImg {

background: #eeeeee;

width: 200px;

height: 80px;

border-radius: 6px;

padding: 10px 20px;

position: relative;

}

.p_beforeImg:before {

content: '';

background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容沒測*/

position: absolute;

top: -15px;

z-index: 2;

width: 32px;

height: 16px;

}

ello Word(H是通過before添加的文字)

通過before添加三角尖圖片

運行效果

偽類選擇器:before使用content屬性插入項目編號，項目編號可以為數字編號、小寫字母編號、大寫字母編號、羅馬字編號等

代碼

css3

//counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1 mycounter為我指定的計數器名

.p_before_number>span,.p_before_letter>span {

counter-increment: mycounter;

display: block;

}

.p_before_number>span:before {

content: '第'counter(mycounter)'種';

}

//upper-alpha為大寫字母

//其它的編號類型：list-style-type屬性下面將列出它所有的值

.p_before_letter>span:before {

content: counter(mycounter,upper-alpha)'.';

}

蘋果

香蕉

芒果

跑步

游泳

爬山

運行效果

第1種蘋果

第2種香蕉

第3種芒果

A.跑步

B.游泳

C.爬山

list-style-type屬性

值 描述

none 無標記。

disc 默認。標記是實心圓。

circle 標記是空心圓。

square 標記是實心方塊。

decimal 標記是數字。

decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)

lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)

upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)

lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)

lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)

upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)

hebrew 傳統的希伯來編號方式

armenian 傳統的亞美尼亞編號方式

georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)

cjk-ideographic 簡單的表意數字

hiragana 標記是：a, i, u, e, o, ka, ki, 等。(日文片假名)

katakana 標記是：A, I, U, E, O, KA, KI, 等。(日文片假名)

hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。(日文片假名)

katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

以上list-style-type屬性來源w3school

after: 偽元素選擇器用于在某個元素之后插入一些內容

把before的地方換成after，插入圖片樣式用一下的就行

.p_after:after {

content: 'd';

color: #01B4EE;

}

.p_afterImg {

background: #eeeeee;

width: 200px;

height: 80px;

border-radius: 6px;

padding: 10px 20px;

position: relative;

}

.p_afterImg:after {

content: '';

background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容沒測*/

position: absolute;

bottom: -15px;

z-index: 2;

width: 32px;

height: 16px;

}

運行效果

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML子选择器怎么加图,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。