CSS伪类不起作用？探索内容属性！_0
时间：2023-03-12 20:11:15
科技观察
问题问题是CSS伪类没有生效。具体表现如下。你可以看到demo[1]:我是Gopal。类别列表- 苹果
香蕉- 菠萝
葡萄
.newEntry::after{content:"New!";color:red;}效果如下：填充图片有时候，我们想在段落前面插入一个ICON，通过url(),URI()指定ICON的资源地址。URI值指定外部资源（例如图像）。如果无法显示资源或图像，它将被忽略或显示一些占位符（例如无图像标志）。我是Gopal
.desc:before{content:url('https://p3-passport.byteacctimg.com/img/user-avatar/a0383600d66ccc81b3396b75cf3a95ea~300x300.image');}效果如下：计数器播放列表编号。content属性还有一个很强大的设置方法，counter()函数。来看看！对于列表，我们往往需要对其编号进行自定义，比如为编号编号添加相关背景等。那么我们如何通过content属性来完成这个功能呢？这需要结合CSS计数器。CSS计数器是页面范围的变量，其值可以使用CSS规则更改。下面通过Demo来看看如何处理。先看HTML结构：
我的第一项
我的第二项
我的第三项
的第二步，使用counter-reset属性设置一个计数器。list-number是此处要使用的变量名。.list{counter-reset:list-number;}第三步，使用counter-increment属性增加计数器的值。现在，每次出现.listdiv元素时，list-number变量都会递增1。.listdiv{counter-increment:list-number;}作为最后一步，在内容属性的counter()函数中使用:before伪元素来显示数字。.listdiv{counter-increment:list-number;+content:counter(list-number);}效果如下：我们将添加更多修改：.listdiv{counter-increment:list-number;内容：计数器（列表编号）；+margin-right：10px；+margin-bottom：10px；+width：35px；+height：35px；+display：inline-flex；+align-items：center；+justify-content:center;+font-size:16px;+background-color:#d7385e;+border-radius:50%;+color:#fff;}效果如下：counter()函数可以有两个参数：计数器名称和计数器格式。对于第二个参数，可以使用任何有效的列表样式类型值。例如，我想显示罗马数字。可以修改如下：.listdiv:before{counter-increment:list-number;-content:counter(list-number);+content:counter(list-number,lower-roman);//....}是不是很酷？最后，你经常在你的项目中使用content属性吗？你经常使用哪些功能？参考使用CSS计数器来玩列表号[3]参考资料[1]demo：https://codepen.io/gpingfeng/pen/GRQzBwV[2]这里：https://codepen.io/gpingfeng/pen/QWQYVdM[3]使用CSS计数器玩转列表号：https://segmentfault.com/a/1190000038292189
