欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS 列表模型之marker標(biāo)記的使用

  發(fā)布時(shí)間:2020-07-23 16:36:59   作者:找到Web   我要評(píng)論
這篇文章主要介紹了CSS 列表模型之marker標(biāo)記的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要對(duì)::master偽元素、list-item下的list-style-imagelist-style-type樣式屬性進(jìn)行介紹,并介紹了在實(shí)際中如何使用。list-item下還有其他不常用的樣式屬性這里不做介紹。感興趣的可以自行移步CSS 標(biāo)準(zhǔ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-itemlist-items在創(chuàng)建的時(shí)候會(huì)自動(dòng)生成markercounter。

標(biāo)記的樣式可以使用list-style-typelist-style-image屬性或者直接使用::marker偽元素進(jìn)行樣式編寫。下面展示一個(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è)置字體樣式、顏色等屬性,類似上面效果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-spacestext-space-trim: discard-after一起使用,更能達(dá)到想要的效果,感興趣的請(qǐng)移步 issue 4448issue 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文本類型填充標(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ù)器樣式,允許開發(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以上版本通過(guò)啟用experimental Web Platform才支持,如果你想要測(cè)試效果,請(qǐng)前往chrome://flags啟用experimental Web Platform。并不推薦在實(shí)際項(xiàng)目去使用這條規(guī)則,更推薦使用常規(guī)的做法去設(shè)置標(biāo)記塊樣式。

總結(jié)

列表在前端項(xiàng)目中很常見(jiàn),應(yīng)用場(chǎng)景也十分廣泛。個(gè)人覺(jué)得,::marker偽元素是對(duì)list-style-imagelist-style-text的補(bǔ)充,三者都是定義標(biāo)記塊的填充內(nèi)容,image注重圖像,text注重字符串,::marker則可以定font、color等樣式,各具特色。

參考

https://www.w3.org/TR/2020/WD-css-lists-3-20200709
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

到此這篇關(guān)于CSS 列表模型之marker標(biāo)記的使用的文章就介紹到這了,更多相關(guān)CSS marker標(biāo)記內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • 淺談CSS 偽元素&偽類的妙用

    這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2020-09-01
  • 什么是BFC? CSS 使用偽元素清除浮動(dòng)的方法

    塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動(dòng)的方
    2019-07-01
  • CSS :befor :after 偽元素的巧妙用法

    本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場(chǎng)景,如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形,感興趣的朋友一起看看吧
    2018-02-07
  • CSS3中偽元素::before和::after的用法示例

    before 和 after其實(shí)就是附著在元素前后的偽元素,說(shuō)他是偽元素的意思就是,元素不是在DOM中生成的,而是在瀏覽器渲染引擎渲染CSS的時(shí)候畫上去的,這篇文章主要給大家介紹
    2017-09-18
  • CSS 偽元素::marker詳解

    本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景,可以看出雖然 ::before 、::after 也能實(shí)現(xiàn)類似的功能,但 CSS 還是提供了更具有語(yǔ)義化的標(biāo)簽 ::marker,也表明了大家需
    2021-06-25

最新評(píng)論