1. 首页
  2. IT资讯

CSS 伪元素基础知识:content 与counter 实用技巧(二)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F47d05793d2624bb092b746a3d9b0e9c4″ img_width=”1280″ img_height=”720″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6724952951946740235u002F?group_id=6724952951946740235″ target=”_blank”u003ECSS 伪元素基础知识:before 与after (一)u003Cu002Fau003E,笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭配counter (计数器) 进行一些有趣的应用,相信熟练之后搞不好能做出很好玩的内容。u003Cu002Fpu003Eu003Ch1u003Ecounter 基本用法u003Cu002Fh1u003Eu003Cpu003E在CSS里头,counter是个很有意思的功能,最常见得就是如果我们使用list清单,样式选择decimal十进制,当清单内容变多的时候数字也会随着递增,底层貌似就是使用counter的原理,也因为counter 所产生的数值并不实际存在于网页的元素内,所以如果我们要在清单元素之外使用,就必须透过::before 或::after的content来实现。u003Cu002Fpu003Eu003Cpu003Ecounter最的基本用法一定要有一个父元素和子元素(类似list的原理,比如使用ul包着li ),所以页面布局会类似下面这段html:u003Cu002Fpu003Eu003Cpreu003E<div>u003Cbru003E <span>钢铁侠<u002Fspan>u003Cbru003E <span>美国队长<u002Fspan>u003Cbru003E <span>雷神索尔<u002Fspan>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在CSS里头,先针对div父元素使用counter-reset:num;进行计数器初始化的设置,里面num是计数器累以数值计算的设置,接着可以在span::before里面看到counter-increment:num;这一段,这段的作用是把num累加上去,预设数值为加1,接着就通过content这个属性显示出来。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E计数器预设的显示语法为:counter(计数器名称, list-style-type)u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpreu003Ediv{u003Cbru003E counter-reset:num;u003Cbru003E}u003Cbru003Espan{u003Cbru003E display:block;u003Cbru003E}u003Cbru003Espan::before{u003Cbru003E counter-increment:num; u003Cbru003E content:counter(num) ‘. ‘;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd09a37ea3fa543808d78a8b1551c40c4″ img_width=”236″ img_height=”194″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E通过指定一开始counter-reset 的起始计数值,还有counter-increment累加的递增数值(步长),还可以指定从某个数值开始计数。u003Cu002Fpu003Eu003Cpreu003Ediv{u003Cbru003E counter-reset:num 3;u003Cbru003E}u003Cbru003Espan{u003Cbru003E display:block;u003Cbru003E}u003Cbru003Espan::before{u003Cbru003E counter-increment:num 2; u003Cbru003E content:counter(num) ‘. ‘;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff4821712883c47c09ceacc2f9d914710″ img_width=”236″ img_height=”194″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果要更换数字的样式,也可以透过计数器的第二个设定值list-style-type来更改,下面的例子就是将样式更改为georgian。u003Cu002Fpu003Eu003Cpreu003Ediv{u003Cbru003E counter-reset:num;u003Cbru003E}u003Cbru003Espan{u003Cbru003E display:block;u003Cbru003E}u003Cbru003Espan::before{u003Cbru003E counter-increment:num; u003Cbru003E content:counter(num, georgian) ‘. ‘;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F156defcd6f254e2bac862dbf8a46de6e” img_width=”206″ img_height=”168″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Ecounter 进阶用法u003Cu002Fh1u003Eu003Cpu003E除了指定单一个变数外,counter 也可以同时指定多个变数,例如下面这段HTML,有三个类别在里面,我分别用span、i 和b 来分类。u003Cu002Fpu003Eu003Cpreu003E<div>u003Cbru003E <span>钢铁侠<u002Fspan>u003Cbru003E <span>美国队长<u002Fspan>u003Cbru003E <span>雷神索尔<u002Fspan>u003Cbru003E <i>神盾局<u002Fi>u003Cbru003E <i>神鬼局<u002Fi>u003Cbru003E <i>神经局<u002Fi>u003Cbru003E <b>九头蛇<u002Fb>u003Cbru003E <b>九头牛<u002Fb>u003Cbru003E <b>九头猪<u002Fb>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003ECSS一开始counter-reset可以指定多个计数器,通过一个空白字符进行分隔,如果空白字符后面跟着数字则是起始值,没有数字预设为1,当这样设定之后,就可以看到不同类别的数字代号就不同。u003Cu002Fpu003Eu003Cpreu003Ediv{u003Cbru003E counter-reset:num numi 2 numb 5;u003Cbru003E}u003Cbru003Espan, i, b{u003Cbru003E display:block;u003Cbru003E}u003Cbru003Espan::before{u003Cbru003E counter-increment:num; u003Cbru003E content:counter(num) ‘. ‘;u003Cbru003E}u003Cbru003Ei::before{u003Cbru003E counter-increment:numi 2; u003Cbru003E content:counter(numi) ‘. ‘;u003Cbru003E}u003Cbru003Eb::before{u003Cbru003E counter-increment:numb 5; u003Cbru003E content:counter(numb) ‘. ‘;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff554843007d84c15bcd9fefd06e695c9″ img_width=”298″ img_height=”452″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果遇到了层级结构(目录结构),需要一层层的展开( 例如:1 > 1.1 > 1.1.1 ),采用上述的作法可能就会复杂许多,好在counter 还提供了另外一个counters 的功能,目的就是来解决层级结构的麻烦事,在开始前可以先看看通过ul和li组合的清单布局结构:u003Cu002Fpu003Eu003Cpreu003E<ul>u003Cbru003E <li>第一层u003Cbru003E <ul>u003Cbru003E <li>第二层u003Cbru003E <ul>u003Cbru003E <li>第三层<u002Fli>u003Cbru003E <li>第三层<u002Fli>u003Cbru003E <li>第三层<u002Fli>u003Cbru003E <u002Ful>u003Cbru003E <u002Fli>u003Cbru003E <li>第二层<u002Fli>u003Cbru003E <li>第二层<u002Fli>u003Cbru003E <u002Ful> u003Cbru003E <u002Fli>u003Cbru003E <li>第一层<u002Fli>u003Cbru003E <ul>u003Cbru003E <li>第二层<u002Fli>u003Cbru003E <li>第二层<u002Fli>u003Cbru003E <u002Ful>u003Cbru003E<u002Ful>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E传统的清单如果将list-style设为decimal,同样可以具备数字连续的功能,但相对来说要做一些特殊变化就办不到了。u003Cu002Fpu003Eu003Cpreu003Eli{u003Cbru003E list-style:decimal;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff5005bf2c4dc479a8b5902be1559f643″ img_width=”408″ img_height=”498″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E通过content 和counters 的搭配,我们就可以告别预设值的困扰,甚至可以在不使用清单ul 和li 的状况下,实现和清单一模一样的效果,举例来说,我们纯粹通过div 模拟一个清单的布局( 仍然必须是有父元素和子元素的概念),里面的样式b 就等于是ul,样式a 就等于是li:u003Cu002Fpu003Eu003Cpreu003E<div class=”a”>第一层u003Cbru003E <div class=”b”> u003Cbru003E <div class=”a”>第二层u003Cbru003E <div class=”b”>u003Cbru003E <div class=”a”>第三层<u002Fdiv>u003Cbru003E <div class=”a”>第三层<u002Fdiv>u003Cbru003E <div class=”a”>第三层<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E <div class=”a”>第二层<u002Fdiv>u003Cbru003E <div class=”a”>第二层<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003E<div class=”a”>第一层u003Cbru003E <div class=”b”>u003Cbru003E <div class=”a”>第二层<u002Fdiv>u003Cbru003E <div class=”a”>第二层<u002Fdiv>u003Cbru003E <u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E由于b的外层没有东西,所以一开始要把body 和b 都进行counter reset 的动作,接着通过counters 的使用,让计数器的数值可以一个接着一个放进去,如此一来就可以做到原本清单不容易实现的效果了。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003Ecounters 使用语法:counters(计数器名称, 分隔符, list-style-type)u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpreu003Ebody, .b{u003Cbru003E counter-reset:c;u003Cbru003E}u003Cbru003E.a::before{u003Cbru003E content:counters(c, “.”) “:”;u003Cbru003E counter-increment:c; u003Cbru003E}u003Cbru003Ediv{u003Cbru003E margin-left:10px;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F1b571813176842c891020efb96921d8f” img_width=”440″ img_height=”532″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E了解原理之后,通过::before 和::after 的交互应用,就可以做出颇具特色的清单效果。u003Cu002Fpu003Eu003Cpreu003Ebody, .b{u003Cbru003E counter-reset:c;u003Cbru003E}u003Cbru003E.a{u003Cbru003E box-sizing:border-box;u003Cbru003E position:relative;u003Cbru003E line-height:40px;u003Cbru003E}u003Cbru003E.a .a{u003Cbru003E padding-left:30px;u003Cbru003E}u003Cbru003E.a::after{u003Cbru003E content:”;u003Cbru003E box-sizing:border-box;u003Cbru003E display:inline-block;u003Cbru003E position:absolute;u003Cbru003E z-index:-1;u003Cbru003E top:0;u003Cbru003E left:0;u003Cbru003E width:100%;u003Cbru003E height:40px;u003Cbru003E margin-left:30px;u003Cbru003E box-shadow:inset 0 2px #666;u003Cbru003E background:#eee;u003Cbru003E}u003Cbru003E.a::before{u003Cbru003E content:counter(c, upper-roman);u003Cbru003E counter-increment:c;u003Cbru003E display:inline-block;u003Cbru003E width:30px;u003Cbru003E height:40px;u003Cbru003E background:#666;u003Cbru003E color:#fff;u003Cbru003E text-align:center;u003Cbru003E margin-right:5px;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F526e9ad1ba07444faa331167bf294243″ img_width=”1134″ img_height=”886″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cblockquoteu003Eu003Cpu003E文章来源:https:u002Fu002Fwww.oxxostudio.twu002Farticlesu002F201706u002Fpseudo-element-2.htmlu003Cu002Fpu003Eu003Cpu003E原文作者:oxxostudiou003Cu002Fpu003Eu003Cpu003E由于网页为繁体内容,术语描述和话术与我们有差异的问题,笔者在保证不改变原意的基础上做了调整,并在此基础上进行了错误校正,如发现问题,欢迎你的指正u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Ch1u003E小结u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F198045af-9fa2-4c27-b56b-59751a3ce7a4″ img_width=”1023″ img_height=”682″ alt=”CSS 伪元素基础知识:content 与counter 实用技巧(二)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E原本网页里面使用的清单列表展示,如果要进行样式的修改、或是一些编号的设置,往往都要通过JavaScript来实现,如果熟练了counter的用法,搞不好纯粹使用CSS 就能取代掉大部分JavaScript也说不定呢,更多的惊喜有待你的发现。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:CSS 伪元素基础知识:content 与counter 实用技巧(二)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10726.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code