CSS列表模型之marker標(biāo)記的使用方法-創(chuàng)新互聯(lián)

這篇“CSS 列表模型之marker標(biāo)記的使用方法”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS 列表模型之marker標(biāo)記的使用方法”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

成都創(chuàng)新互聯(lián)專注于大埔企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),電子商務(wù)商城網(wǎng)站建設(shè)。大埔網(wǎng)站建設(shè)公司,為大埔等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

::marker 是什么

::marker是一個標(biāo)記偽元素，能夠定義內(nèi)容填充在list-item上代表列表項(xiàng)的標(biāo)志，先附上一個例子，就能很清楚地看出它的作用。

<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 找采購</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)建的時候會自動生成marker和counter。

標(biāo)記的樣式可以使用list-style-type和list-style-image屬性或者直接使用::marker偽元素進(jìn)行樣式編寫。下面展示一個例子。

用::marker偽元素對標(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 找采購</p>
<p>zhaodao88.com 找人脈</p>

效果如圖:

當(dāng)然也可以為標(biāo)記設(shè)置字體樣式、顏色等屬性，類似上面效果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可能不會有很好的效果，可以嘗試text-space-collapse: preserve-spaces和text-space-trim: discard-after一起使用，更能達(dá)到想要的效果，感興趣的請移步issue 4448和issue 4891

使用list-style-image圖像填充標(biāo)記內(nèi)容

指定標(biāo)記圖像，當(dāng)列表項(xiàng)內(nèi)容正常時，用指定圖像填充列表項(xiàng)的標(biāo)記。

list-style-image 正常取值<image> | none，未定義情況下是none，作用在列表項(xiàng)list-items下。其中<image>用于指定標(biāo)記圖像的url。參考鏈接移步

下面是使用例子，將會為<li>標(biāo)簽的標(biāo)記塊填充上指定鏈接的ellipse.png圖像

li { list-style-image: url("http://www.example.com/ellipse.png") }

使用list-style-type文本類型填充標(biāo)記內(nèi)容

指定標(biāo)記字符串，當(dāng)列表項(xiàng)內(nèi)容正常時，用指定字符串填充列表項(xiàng)的標(biāo)記。

list-style-type 正常取值<counter-style> | <string> | none，未定義情況下是disc(圓形標(biāo)記符)，作用在列表項(xiàng)list-items下。參考鏈接移步

<counter-style>是CSS 定義的計(jì)數(shù)器樣式，允許開發(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ù)字的大寫形式

ul { list-style-type: symbols(cyclic '○' '●'); } // 標(biāo)記符在'○'和'●'之間切換

ul { list-style-type: none; } // 不顯示標(biāo)記

注意

::marker偽元素標(biāo)記不是所有瀏覽器都支持，包括chrome也只是在80以上版本通過啟用experimental Web Platform才支持，如果你想要測試效果，請前往chrome://flags啟用experimental Web Platform。并不推薦在實(shí)際項(xiàng)目去使用這條規(guī)則，更推薦使用常規(guī)的做法去設(shè)置標(biāo)記塊樣式。

以上是“CSS 列表模型之marker標(biāo)記的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：CSS列表模型之marker標(biāo)記的使用方法-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article42/dhsjhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、服務(wù)器托管、虛擬主機(jī)、Google、軟件開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)