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

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

counter-increment自增多次 無效

counter-increment自增多次 無效

暮色呼如 2019-05-20 17:53:21
學習計數(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因為教程上說不論何處,每次出現(xiàn)counter-increment計數(shù)器皆自增,于是修改CSS為:div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);counter-increment:pl;}兩個counter-increment是不是計數(shù)器自增2次?于是寄希望能出現(xiàn)結(jié)果2text23text34text4可是。。。卻出現(xiàn)這個東西。。?!?text23text45text6這是什么意思???問題2:還是基于上題,這次我把counter-increment單獨放置div{counter-reset:pl;}p::before{content:counter(pl);counter-increment:pl;}p::after{content:counter(pl);}p{counter-increment:pl;}結(jié)果:2text24text46text6這個結(jié)論雖然不是我設(shè)想的,但也貌似懂了,兩個counter-increment的語義是:計數(shù)器自增步長=2。于是從0初始,2,4,6...原諒我整天胡思亂想,于是又加一個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é)果無任何變化,不論我加入多少個counter-increment,可結(jié)果固定在2,4,6..不變了2text24text46text6這兩天問了不少問題,有時候在想,有沒有比較靠譜、深入的教程,多些例子、課后題的教程,畢竟w3c太簡略了,MDN每節(jié)也只一個課后題。每次遇到點問題都來這問,挺麻煩大家的,不好意思。
查看完整描述

2 回答

?
眼眸繁星

TA貢獻1873條經(jīng)驗 獲得超9個贊

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

TA貢獻1844條經(jīng)驗 獲得超8個贊

CSS描述的是你想要的結(jié)果(聲明式),而不是你想要計算機怎么做(過程式)。所以:
不論實際代碼的順序,CSS總是先處理p,再處理p::before,再處理p::after;
不論實際代碼的順序,CSS總是先處理counter-increment,再處理content;
聲明多次同一個樣式,只會處理最終生效的,丟棄其他的。
所以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的順序是
計算p的最終生效樣式:第二個p有counter-increment,丟棄第一個p的counter-increment
(最終生效的p)counter-increment:pl;
(p::before)counter-increment:pl;
(p::before)content:counter(pl);
(p::after)content:counter(pl);
                            
查看完整回答
反對 回復 2019-05-20
  • 2 回答
  • 1 關(guān)注
  • 792 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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