CSS 伪元素 CONTENT与COUNTER的使用方法
本文最后更新于 680 天前,其中的信息可能已经有所发展或是发生改变。

这篇文章是作为CSS 中伪元素before或after中content的特殊用法该文章的拓展,上一篇文章对content做了一些相关用法的赘述,这篇文章专门针对content中counter(计数器)这个属性值进行相关用法的距离,用于更好的理解这个counter属性。

1、counter基本用法:

在CSS里,content中的counter属性也是配合伪元素一起使用,counter产生的数值并不存在于网页的元素内,所以如果我们要在元素之外使用,就必须透过::before::after的content来实现。

1)CSS计数器通过一个变量来设置,根据规则递增变量。

2)使用计数器自动编号:(CSS计数器使用到以下几个属性:)

  • counter–reset 创建或者重置计数器
  • counter-increment 递增变量
  • content 插入生成的内筒
  • counter() 或者 counters()函数 将计数器的值添加到元素

3)要使用CSS计数器,得先使用counter-reset 创建:

下面实例中在body中创建了几个h1标签,然后在h1标签前为其加上计时器:

<body>
	<h1>大标题</h1>
	<h1>大标题</h1>
	<h1>大标题</h1>
	<h1>大标题</h1>
</body>

css:这里的my是自己定义的(相当于一个变量)

body{		
	counter-reset:my;	
}
h1:before{	
	counter-increment:my;	
    content:counter(my)'.';	
}

上面是官方的步骤:我们也可以不用创建我试过了也是可以的:

h1:before{	
    content:counter(my)'.';
}
h1{			
    counter-increment:my;
}

上面两种效果相同:

4)嵌套计数器:下面的例子是在页面中创建一个计时器,在每一个h1元素前面添加 计数值Section主题的计数值,嵌套的计数值这放在h2元素的前面。(下面的是一个官方的例子,后面我们自己再写一个,官方的例子都是先创建一个计数器,然后再进行操作)

<body>
	<h1>HTML 教程:</h1>
	<h2>HTML 教程</h2>
	<h2>CSS 教程</h2>
	
	<h1>Scripting 教程:</h1>
	<h2>JavaScript</h2>
	<h2>VBScript</h2>
	
	<h1>XML 教程:</h1>
	<h2>XML</h2>
	<h2>XSL</h2>
</body>

css:

body {
  counter-reset: section;		
}

h1 {
  counter-reset: subsection;	
}

h1::before {
  counter-increment: section;	
  content: "Section " counter(section) ". ";	
}

h2::before {
  counter-increment: subsection;	
  content: counter(section) "." counter(subsection) " ";	
}

见一下效果:

计数器也可以用于列表中,列表的子元素会自动创建,这里我们使用了counters()函数在不同到的嵌套层级中插入字符串:

<body>
	<ol>
	  <li>item</li>
	  <li>item   
	  <ol>
	    <li>item</li>
	    <li>item</li>
	    <li>item
	    <ol>
	      <li>item</li>
	      <li>item</li>
	      <li>item</li>
	    </ol>
	    </li>
	    <li>item</li>
	  </ol>
	  </li>
	  <li>item</li>
	  <li>item</li>
	</ol>
	
	<ol>
	  <li>item</li>
	  <li>item</li>
	</ol>
</body>

css:

ol {
  counter-reset: section;	
  list-style-type: none;
}

li::before {
  counter-increment: section;	
  content: counters(section,".") " ";
}

见一下效果:

2、计数器属性: (计数器的属性还有更多的用法,后面会单独写demo进行测试。)

属性 描述
content 使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment 递增一个或多个值
counter-reset 创建或重置一个或多个计数器

参考文章

标题:CSS 伪元素 CONTENT与COUNTER的使用方法
地址:https://xiaodongxier.com/1969.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇