您好,登錄后才能下訂單哦!
這篇“CSS 列表模型之marker標(biāo)記的使用方法”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“CSS 列表模型之marker標(biāo)記的使用方法”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來(lái)就讓我們進(jìn)入主題吧。
::marker 是什么
::marker
是一個(gè)標(biāo)記偽元素,能夠定義內(nèi)容填充在list-item
上代表列表項(xiàng)的標(biāo)志,先附上一個(gè)例子,就能很清楚地看出它的作用。
<style> li::marker { content: "(" counter(list-item) ")"; } li { display: list-item; } </style> <ul> <li>zhaodao88.com 找商機(jī)</li> <li>zhaodao88.com 找人脈</li> <li>zhaodao88.com 找采購(gòu)</li> </ul>
效果圖:
在這里,marker
為元素定義的是每一項(xiàng)列表項(xiàng)前面的標(biāo)記符,在偽元素內(nèi)的content
的內(nèi)容就是要在列表項(xiàng)前面所填充的內(nèi)容。
使用::marker填充標(biāo)記內(nèi)容
需要注意的是,普通元素要想使用marker
,必須將元素定義成display: list-item
,list-items
在創(chuàng)建的時(shí)候會(huì)自動(dòng)生成marker
和counter
。
標(biāo)記的樣式可以使用list-style-type
和 list-style-image
屬性或者直接使用::marker
偽元素進(jìn)行樣式編寫(xiě)。下面展示一個(gè)例子。
用::marker
偽元素對(duì)標(biāo)記進(jìn)行控制,偽元素內(nèi)content
的內(nèi)容就是標(biāo)記符的內(nèi)容
<style> p { margin-left: 12 em; } p.note { display: list-item; counter-increment: note-counter; } p.note::marker { content: "Note " counter(note-counter) ":"; color: blue; font-weight: bold; } </style> <p>zhaodao88.com 找商機(jī)</p> <p class="note">zhaodao88.com 找采購(gòu)</p> <p>zhaodao88.com 找人脈</p>
效果如圖:
當(dāng)然也可以為標(biāo)記設(shè)置字體樣式、顏色等屬性,類(lèi)似上面效果li::marker { color: blue; font-weight:bold; }
值得注意的是:目前只有以下屬性能夠作用于marker
偽元素上
所有的字體樣式:font相關(guān)
white-space屬性
color屬性
text-combine-upright, unicode-bidi, direction屬性
content屬性
所有的animation和transition屬性
有issue提出,在標(biāo)記使用white-space: pre
可能不會(huì)有很好的效果,可以嘗試text-space-collapse: preserve-spaces
和text-space-trim: discard-after
一起使用,更能達(dá)到想要的效果,感興趣的請(qǐng)移步 issue 4448和issue 4891
使用list-style-image圖像填充標(biāo)記內(nèi)容
指定標(biāo)記圖像,當(dāng)列表項(xiàng)內(nèi)容正常時(shí),用指定圖像填充列表項(xiàng)的標(biāo)記。
list-style-image
正常取值 <image> | none
,未定義情況下是 none
,作用在列表項(xiàng)list-items
下。其中<image>
用于指定標(biāo)記圖像的url
。參考鏈接移步
下面是使用例子,將會(huì)為<li>
標(biāo)簽的標(biāo)記塊填充上指定鏈接的ellipse.png
圖像
li { list-style-image: url("http://www.example.com/ellipse.png") }
使用list-style-type文本類(lèi)型填充標(biāo)記內(nèi)容
指定標(biāo)記字符串,當(dāng)列表項(xiàng)內(nèi)容正常時(shí),用指定字符串填充列表項(xiàng)的標(biāo)記。
list-style-type
正常取值 <counter-style> | <string> | none
,未定義情況下是 disc(圓形標(biāo)記符)
,作用在列表項(xiàng)list-items
下。參考鏈接移步
<counter-style>
是CSS 定義的計(jì)數(shù)器樣式,允許開(kāi)發(fā)者自定義counter
的樣式。比如:
@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } ul { list-style-type: thumbs; }
具體<counter-style>
定義規(guī)則參考
下面是關(guān)于list-style-type
的使用例子(如果作用元素不是列表元素,則元素的display必須設(shè)置為list-item)
ul { list-style-type: "★"; } // 使用"★"作為標(biāo)記符 p.note { // 如果作用元素不是列表元素,則元素的display必須設(shè)置為list-item display: list-item; list-style-type: "Note: "; list-style-position: inside; } ol { list-style-type: upper-roman; } // 定義為羅馬數(shù)字的大寫(xiě)形式 ul { list-style-type: symbols(cyclic '○' '●'); } // 標(biāo)記符在'○'和'●'之間切換 ul { list-style-type: none; } // 不顯示標(biāo)記
注意
::marker
偽元素標(biāo)記不是所有瀏覽器都支持,包括chrome
也只是在80以上版本通過(guò)啟用experimental Web Platform
才支持,如果你想要測(cè)試效果,請(qǐng)前往chrome://flags
啟用experimental Web Platform
。并不推薦在實(shí)際項(xiàng)目去使用這條規(guī)則,更推薦使用常規(guī)的做法去設(shè)置標(biāo)記塊樣式。
以上是“CSS 列表模型之marker標(biāo)記的使用方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。