如何让CSS仅作用于博客文章链接,排除侧边栏?
解决博客文章链接下划线样式不影响侧边栏的问题
方案1:仅作用于博客文章内的文本链接
WordPress主题里,文章正文内容一般会被包裹在.entry-content类的容器中,直接将CSS选择器定位到这个容器内的链接,就能让样式只生效于文章正文:
body.single.single-post .entry-content a { box-shadow: inset 0 -0.4rem #EE841B8F }
这种写法会自动避开侧边栏、页眉页脚区域的链接,完全符合需求。
方案2:排除侧边栏的链接
如果不想依赖文章内容容器类,可以用:not()选择器精准排除侧边栏内的链接。先确认你主题里侧边栏的容器类(比如你的站点侧边栏类为.sidebar),然后修改CSS:
body.single.single-post .site-content a:not(.sidebar a) { box-shadow: inset 0 -0.4rem #EE841B8F }
要是层级匹配有问题,也可以用更严谨的写法,确保只排除.site-content下侧边栏里的链接:
body.single.single-post .site-content *:not(.sidebar) a { box-shadow: inset 0 -0.4rem #EE841B8F }
你之前用:not()失败大概率是因为没找准侧边栏的正确层级或类名,只要匹配到侧边栏的容器,就能成功排除。
内容的提问来源于stack exchange,提问作者travelsforfood
相关产品推荐
相关产品推荐

