第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

counter-increment自增多次 無效

counter-increment自增多次 無效

炎炎設(shè)計(jì) 2019-05-13 11:25:12
學(xué)習(xí)計(jì)數(shù)器遇到的問題,兩天搜索找不到相關(guān)資料。問題1:HTML:texttexttextCSS:div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);}結(jié)果:1text12text23text3因?yàn)榻坛躺险f不論何處,每次出現(xiàn)counter-increment計(jì)數(shù)器皆自增,于是修改CSS為:div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);counter-increment:pl;}兩個(gè)counter-increment是不是計(jì)數(shù)器自增2次?于是寄希望能出現(xiàn)結(jié)果2text23text34text4可是。。。卻出現(xiàn)這個(gè)東西。。?!?text23text45text6這是什么意思???問題2:還是基于上題,這次我把counter-increment單獨(dú)放置div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);}p{counter-increment:pl;}結(jié)果:2text24text46text6這個(gè)結(jié)論雖然不是我設(shè)想的,但也貌似懂了,兩個(gè)counter-increment的語義是:計(jì)數(shù)器自增步長=2。于是從0初始,2,4,6...原諒我整天胡思亂想,于是又加一個(gè)counter-increment會出現(xiàn)什么?div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);}p{counter-increment:pl;}p{counter-increment:pl;}是不是步長=3,于是出現(xiàn)3,6,9...可我又被耍了結(jié)果無任何變化,不論我加入多少個(gè)counter-increment,可結(jié)果固定在2,4,6..不變了2text24text46text6這兩天問了不少問題,有時(shí)候在想,有沒有比較靠譜、深入的教程,多些例子、課后題的教程,畢竟w3c太簡略了,MDN每節(jié)也只一個(gè)課后題。每次遇到點(diǎn)問題都來這問,挺麻煩大家的,不好意思。
查看完整描述

2 回答

?
慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊

問題1:
我不太理解你的問題,before一次after一次不是正好
12
34
56
如果你想要每次+2,應(yīng)該是:
p::before{
counter-increment:pl2;
content:counter(pl);
}
p::after{
content:counter(pl);
}
問題2:
CSS里重復(fù)多次的結(jié)果,會把所有樣式合并到一起,所以重復(fù)兩次和只寫一次效果是一樣的。
                            
查看完整回答
反對 回復(fù) 2019-05-13
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

CSS描述的是你想要的結(jié)果(聲明式),而不是你想要計(jì)算機(jī)怎么做(過程式)。所以:
不論實(shí)際代碼的順序,CSS總是先處理p,再處理p::before,再處理p::after;
不論實(shí)際代碼的順序,CSS總是先處理counter-increment,再處理content;
聲明多次同一個(gè)樣式,只會處理最終生效的,丟棄其他的。
所以CSS處理問題1的順序是
(p::before)counter-increment:pl;
(p::before)content:counter(pl);
(p::after)counter-increment:pl;
(p::after)content:counter(pl);
處理問題2.1的順序是
(p)counter-increment:pl;
(p::before)counter-increment:pl;
(p::before)content:counter(pl);
(p::after)content:counter(pl);
處理問題2.2的順序是
計(jì)算p的最終生效樣式:第二個(gè)p有counter-increment,丟棄第一個(gè)p的counter-increment
(最終生效的p)counter-increment:pl;
(p::before)counter-increment:pl;
(p::before)content:counter(pl);
(p::after)content:counter(pl);
                            
查看完整回答
反對 回復(fù) 2019-05-13
  • 2 回答
  • 0 關(guān)注
  • 374 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號