CSS中添加伪元素,并移除特定a类标签的伪元素的样式
今天,在修改主题的时候,发现自己post-content中的a类元素,使用:after伪元素以后,同时作用于cl-offset且name属性以cl-开头的和href属性包含#cl-且onclick属性为Catalogswith()的标签。
.post-content a:after{
content: '↷';
font-size: .9rem;
}
这两个代码共同性就是a类元素,我们需要做的事情就是,移除掉不需要:after伪元素的属性。
移除特定a标签的 :after 伪元素的样式,需要使用CSS选择器来精确选中这个a标签,并设置 :after 伪元素的content属性为空。这样,:after伪元素就不会显示任何内容。
以下是CSS代码示例,它会移除所有.post-content下具有类cl-offset和a,并且name属性以cl-开头的a标签的:after伪元素:
.post-content a.cl-offset[name^="cl-"]:after {
content: '' !important;
}</div>
这里的 ^="cl-"
是一个属性选择器,它会匹配所有name属性值以cl-开头的元素。 content: ''
会移除:after伪元素的内容,!important是一个强制性声明,确保这个规则会覆盖其他可能存在的规则。
把这段CSS代码应该放在CSS样式表中,它将确保所有符合条件的a标签的:after伪元素都不会显示任何内容。
同理如果想要为.post-content类下的所有a标签添加:after伪元素,并设置其内容为↷和字体大小为.9rem,但同时想要移除特定a标签的:after伪元素(即那些href属性包含#cl-且onclick属性为Catalogswith()的标签),可以使用以下CSS代码:
/* 为所有.post-content下的a标签添加:after伪元素 */
.post-content a:after {
content: '↷';
font-size: .9rem;
}
/* 移除具有特定href和onclick属性的a标签的:after伪元素 */
.post-content a[href^="#cl-"][onclick="Catalogswith()"]:after {
content: none;
}
这段CSS代码起了两个作用:
- 它为.post-content类下的所有a标签添加了一个:after伪元素,内容为↷,字体大小为.9rem。然后,针对那些href属性以#cl-开头且onclick属性为Catalogswith()的a标签,将:after伪元素的内容设置为none,从而移除了这些特定标签的:after伪元素。
- 除了符合特定条件的a标签外,其他所有.post-content下的a标签都会在其后显示一个↷符号。
果然,学习才能使人进步啊,现在不就知道什么a类元素,什么伪元素了吗。不然连怎么问Ai都不知道。
参考资料:
1.CSDN://blog.csdn.net/libol/article/details/139976586
2.腾讯云://cloud.tencent.com/developer/article/1407981
3.简书://www.jianshu.com/p/77f0efab3747
4.php中文网://www.php.cn/code/894.html
5.picprose://picprose.net/zh
- 上一篇: 十年之约第五年,我都收获了些什么
- 下一篇: 重温《哈利波特与魔法石》,想回到2002年的冬天
设计师就是不一样,主题很漂亮很舒服。
css越研究越精通。
css 就像画画一样,会上瘾😍
CSS我也只是会简单的使用,现在伪类很多不太会
我也是简单使用,现在好多功能可以用css 实现,挺 6 的
CSS3以后很多标签和属性,越发复杂了
反正层级越来越多了,包裹的也越来越大😵💫
看到 css 就头疼,怎么调都不对
css这玩意儿知识点真多,不过好的一点是它就是一个大框架,层层去看,就也还行,普通人也可以自学。
哈哈 css 只会抄和改~写这玩意儿的话实在太难了~
刚开始我也觉得这个太难了,后面折腾次数多了,就习惯了😀