精华内容
下载资源
问答
  • CSS 列表模型之marker标记

    千次阅读 2020-07-22 22:35:54
    CSS 列表模型之marker标记 本文主要对::master伪元素、list-...::marker一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。 <style> li::marker {

    CSS 列表模型之marker标记

    本文主要对::master伪元素、list-item下的list-style-imagelist-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档

    ::marker 是什么

    ::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。

    <style>
    li::marker { content: "(" counter(list-item) ")"; }
    li { display: list-item; }
    </style>
    
    <ul>
      <li>zhaodao88.com 找商机</li>
      <li>zhaodao88.com 找人脉</li>
      <li>zhaodao88.com 找采购</li>
    </ul>
    

    效果图:
    marker效果图 marker
    在这里,marker为元素定义的是每一项列表项前面的标记符,在伪元素内的content的内容就是要在列表项前面所填充的内容。

    使用::marker填充标记内容

    需要注意的是,普通元素要想使用marker,必须将元素定义成display: list-itemlist-items在创建的时候会自动生成markercounter

    标记的样式可以使用list-style-typelist-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

    • ::marker伪元素对标记进行控制,伪元素内content的内容就是标记符的内容
    <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 找商机</p>
    <p class="note">zhaodao88.com 找采购</p>
    <p>zhaodao88.com 找人脉</p>
    

    效果如图:
    marker效果图 marker
    当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: blue; font-weight:bold; }

    值得注意的是:目前只有以下属性能够作用于marker伪元素上

    • 所有的字体样式:font相关
    • white-space属性
    • color属性
    • text-combine-upright, unicode-bidi, direction属性
    • content属性
    • 所有的animationtransition属性

    issue提出,在标记使用white-space: pre可能不会有很好的效果,可以尝试text-space-collapse: preserve-spacestext-space-trim: discard-after一起使用,更能达到想要的效果,感兴趣的请移步 issue 4448issue 4891

    使用list-style-image图像填充标记内容

    指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记。

    list-style-image 正常取值 <image> | none,未定义情况下是 none,作用在列表项list-items下。其中<image>用于指定标记图像的url参考链接移步

    下面是使用例子,将会为<li>标签的标记块填充上指定链接的ellipse.png图像

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

    使用list-style-type文本类型填充标记内容

    指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记。

    list-style-type 正常取值 <counter-style> | <string> | none,未定义情况下是 disc(圆形标记符),作用在列表项list-items下。参考链接移步

    <counter-style>是CSS 定义的计数器样式,允许开发者自定义counter的样式。比如:

    @counter-style thumbs {
     system: cyclic;
     symbols: "\1F44D";
     suffix: " ";
    }
    
    ul {
      list-style-type: thumbs;
    }
    

    具体<counter-style>定义规则参考

    下面是关于list-style-type的使用例子(如果作用元素不是列表元素,则元素的display必须设置为list-item)

    ul { list-style-type: "★"; } // 使用"★"作为标记符
    
    p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item
      display: list-item;
      list-style-type: "Note: ";
      list-style-position: inside;
    }
    
    ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式
    
    ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○'和'●'之间切换
    
    ul { list-style-type: none; } // 不显示标记
    

    注意

    ::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,如果你想要测试效果,请前往chrome://flags启用experimental Web Platform。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式。

    总结

    列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-imagelist-style-text的补充,三者都是定义标记块的填充内容,image注重图像,text注重字符串,::marker则可以定fontcolor等样式,各具特色。

    参考

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

    展开全文
  • CSS 列表模型之marker标记 本文主要对::master伪元素、list-item下的list-style-image、...感兴趣的可以自行移步CSS 标准文档::marker 是什么::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项...

    CSS 列表模型之marker标记

    本文主要对::master伪元素、list-item下的list-style-imagelist-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档

    ::marker 是什么

    ::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。

    <style>
    li::marker { content: "(" counter(list-item) ")"; }
    li { display: list-item; }
    </style>
    
    <ul>
      <li>zhaodao88.com 找商机</li>
      <li>zhaodao88.com 找人脉</li>
      <li>zhaodao88.com 找采购</li>
    </ul>

    效果图:

    19edef4af0195789f6bf4c88cb7a8cbd.png

    在这里,marker为元素定义的是每一项列表项前面的标记符,在伪元素内的content的内容就是要在列表项前面所填充的内容。

    使用::marker填充标记内容

    需要注意的是,普通元素要想使用marker,必须将元素定义成display: list-itemlist-items在创建的时候会自动生成markercounter

    标记的样式可以使用list-style-typelist-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。 + 用::marker伪元素对标记进行控制,伪元素内content的内容就是标记符的内容

    <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 找商机</p>
    <p class="note">zhaodao88.com 找采购</p>
    <p>zhaodao88.com 找人脉</p>

    效果如图:

    a7d7c2b90d5b65eb318e7e918dfac612.png

    当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: blue; font-weight:bold; }

    值得注意的是:目前只有以下属性能够作用于marker伪元素上 + 所有的字体样式:font相关 + white-space属性 + color属性 + text-combine-upright, unicode-bidi, direction属性 + content属性 + 所有的animationtransition属性

    issue提出,在标记使用white-space: pre可能不会有很好的效果,可以尝试text-space-collapse: preserve-spacestext-space-trim: discard-after一起使用,更能达到想要的效果,感兴趣的请移步 issue 4448issue 4891

    使用list-style-image图像填充标记内容

    指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记。

    list-style-image 正常取值 <image> | none,未定义情况下是 none,作用在列表项list-items下。其中<image>用于指定标记图像的url。参考链接移步

    下面是使用例子,将会为<li>标签的标记块填充上指定链接的ellipse.png图像

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

    使用list-style-type文本类型填充标记内容

    指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记。

    list-style-type 正常取值 <counter-style> | <string> | none,未定义情况下是 disc(圆形标记符),作用在列表项list-items下。参考链接移步<counter-style>是CSS 定义的计数器样式,允许开发者自定义counter的样式。比如: ```css @counter-style thumbs { system: cyclic; symbols: "1F44D"; suffix: " "; }
    ul { list-style-type: thumbs; } `` 具体`定义规则参考

    下面是关于list-style-type的使用例子(如果作用元素不是列表元素,则元素的display必须设置为list-item)

    ul { list-style-type: "★"; } // 使用"★"作为标记符
    
    p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item
      display: list-item;
      list-style-type: "Note: ";
      list-style-position: inside;
    }
    
    ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式
    
    ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○''●'之间切换
    
    ul { list-style-type: none; } // 不显示标记

    注意

    ::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,如果你想要测试效果,请前往chrome://flags启用experimental Web Platform。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式。

    总结

    列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-imagelist-style-text的补充,三者都是定义标记块的填充内容,image注重图像,text注重字符串,::marker则可以定fontcolor等样式,各具特色。

    参考

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

    展开全文
  • ::marker一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。 <style> li::marker { content: "(" counter(list-item) ")"; } li { display: ...
  • 什么是列表,列表分为几种 顾名思义,HTML列表就是显示列表使用的。 列表分为无序列表,有序列表和定义列表3种。 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表...
  • HTML当中的列表(清单标记)

    千次阅读 2018-03-13 16:55:40
    在HTML中,清单标记也可以称为...顾名思义,就是你写的这些列表项是没有顺序的,也就是说没有编号的。它的基本结构为:&lt;ul type="属性值"&gt; &lt;li&gt;列表一&lt;/li&gt; ...

    在HTML中,清单标记也可以称为列表,列表分为三种:

    第一种:无序列表(无序清单),为什么会被称为无序列表呢?顾名思义,就是你写的这些列表项是没有顺序的,也就是说没有编号的。它的基本结构为:<ul type="属性值">

                                                   <li>列表一</li>

                                                    <li>列表二</li>

                                                       .......

                                        </ul>

    无序列表只有一个属性,那就是type,这个type只有三种值:disc(实心圆),circle(空心圆),square(正方形),其中默认的值是disc

    第二种:有序列表(顺序清单),有序列表是值列表项有编号的,编号可以分为好多种,这些种类都是type的属性值。

    它的基本结构为:<ol type="属性值" start="一个具体的值">

                                        <li>列表项</li>

                                           <li>列表项</li>

                                            .........

                                </ol>

    有序列表有两个属性:type属性中有:

    1arabic numbers1, 2, 3, ...
    alower alphaa, b, c, ...
    Aupper alphaA, B, C, ...
    ilower romani, ii, iii, ...
    Iupper romanI, II, III, ...

    还有另外一个属性是start,start表示从第几个开始,比如start="5",则从5开始往后算起

    最后一种列表是自定义列表(定义清单):它的基本结构是:<dl>

                                                                                                <dt>标题1</dt>

                                                                                                        <dd>列表项</dd>

                                                                                                        <dd>列表项</dd>

                                                                                                          ......

                                                                                                    

                                                                                                <dt>标题2</dt>

                                                                                                        <dd>列表项</dd>

                                                                                                        <dd>列表项</dd>

                                                                                                          ......    

                                                                                        </dl>

    展开全文
  • key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新...举个例子:一个新闻列表,可点击列表项来将其标记为"已访问",可通过tab切换“娱乐新闻”或是“社会新闻”。 不带key属性的情况下

    key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的

    因为不带key时节点能够复用,省去了销毁/创建组件的开销,同时只需要修改DOM文本内容而不是移除/添加节点,这就是文档中所说的“刻意依赖默认行为以获取性能上的提升”。

    既然如此,为什么还要建议带key呢
    因为这种模式只适用于渲染简单的无状态组件
    对于大多数场景来说,列表组件都有自己的状态

    举个例子:一个新闻列表,可点击列表项来将其标记为"已访问",可通过tab切换“娱乐新闻”或是“社会新闻”。

    不带key属性的情况下,在“娱乐新闻”下选中第二项然后切换到“社会新闻”,"社会新闻"里的第二项也会是被选中的状态,因为这里复用了组件,保留了之前的状态。要解决这个问题,可以为列表项带上新闻id作为唯一key,那么每次渲染列表时都会完全替换所有组件,使其拥有正确状态。

    这只是个简单的例子,实际应用会更复杂。带上唯一key虽然会增加开销,但是对于用户来说基本感受不到差距,而且能保证组件状态正确,这应该就是为什么推荐使用唯一id作为key的原因。至于具体怎么使用,就要根据实际情况来选择了。

    原文解释

    key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

    1. 更准确
      因为带key就不是就地复用了,在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

    2. 更快
      利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。(这个观点,就是我最初的那个观点。从这个角度看,map会比遍历更快。)

    来源: 第 1 题:写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

    展开全文
  • 在css中,“list-style:none”样式表示设置列表项标记的类型为空,即列表项前无标记。list-style属性默认列表项标记的类型为实心圆,如果属性值设置为none,则可以去掉列表项标记。 “list-style:none”样式表示设置...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 166
精华内容 66
关键字:

列表项是什么标记