使用Stylus浏览器扩展移除谷歌搜索结果下划线及相关按钮高亮的问题求助

嘿，我懂你遇到的困扰——谷歌的默认CSS优先级真的挺高，普通选择器经常压不住它的样式。咱们来调整下代码，精准命中目标元素：

首先说搜索结果下划线的问题，现在谷歌的搜索结果链接嵌套在更具体的容器里，hover状态的样式也用了更细分的选择器定义。咱们把选择器写得更精准些，确保覆盖默认样式：

/* 移除搜索结果链接的所有下划线（包含hover状态） */
.g .yuRUbf a,
.g .yuRUbf a:visited,
.g .yuRUbf a:hover,
.g .yuRUbf a:active,
/* 额外覆盖可能的其他搜索链接容器 */
div[data-sokoban-container] a,
div[data-sokoban-container] a:hover {
    text-decoration: none !important;
    /* 保险起见，同时去掉可能用边框实现的下划线 */
    border-bottom: none !important;
}

然后是“See more”和“View all”按钮的高亮问题，这些按钮用的是谷歌的Material Design样式，高亮一般来自背景色或阴影，咱们直接清空这些样式：

/* 移除"See more"和"View all"按钮的高亮效果 */
.VfPpkd-LgbsSe.VfPpkd-LgbsSe-OWXEXe-k8QpJ,
.VfPpkd-LgbsSe.VfPpkd-LgbsSe-OWXEXe-dgl2Hf,
/* 覆盖按钮hover和激活状态 */
.VfPpkd-LgbsSe:hover,
.VfPpkd-LgbsSe:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

把这两段代码合并到你的Stylus脚本里应该就搞定了。如果还有漏网的元素，你可以用浏览器开发者工具（F12）选中对应元素，查看它的具体CSS类，再把选择器补充进去就行~

内容来源于stack exchange