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直接可以添加onclick事件了吗?
现在css越来越灵活了啊
讲得透彻。
时不时瞎折腾一下,哈哈
a上面加onclick之前还从来不知道。
主要是增加a 标签的跳转行为🤣
谢谢。长见识了。作为野路子选手,第一次知道选择器里还可以写onclick。之前从来没把onclick这种当成一个css可以处理的属性看待过。
就是增加链接跳转回但顶部,用在目录树里面的。