CSS 隐藏指定元素教程：基于 href 属性选择器

场景描述

在开发或自定义网站样式时，经常需要隐藏页面中的特定元素。本文以隐藏下拉菜单中的某些链接为例，介绍如何使用 CSS 精确隐藏指定的 <a> 标签。

问题分析

初始尝试：按顺序隐藏（不推荐）

最初可能想到使用 :nth-child() 或 :nth-of-type() 按顺序选择元素：

/* ❌ 不推荐：依赖元素顺序，结构变化时容易失效 */
.menu a:nth-of-type(2),
.menu a:nth-of-type(3),
.menu a:nth-of-type(5) {
    display: none;
}

缺点： HTML 结构变化（增删元素）会导致选择器失效；不同页面可能顺序不同；维护成本高，不易理解。

最佳方案：基于 href 属性选择器（推荐）

使用属性选择器根据 href 值精确定位元素，不依赖顺序。

属性选择器语法

完整示例

HTML 结构

<div class="menu user-menu">
    <div class="header">已登录用户 <strong>XIGE</strong></div>
    <div class="divider"></div>
    <!-- 第1个：保留 -->
    <a class="item" href="/XIGE">个人</a>
    <!-- 第2个：需要隐藏 -->
    <a class="item" href="/XIGE?tab=stars">已点赞</a>
    <!-- 第3个：需要隐藏 -->
    <a class="item" href="/notifications/subscriptions">订阅</a>
    <!-- 第4个：保留 -->
    <a class="item" href="/user/settings">设置</a>
    <!-- 第5个：需要隐藏 -->
    <a class="item" href="https://docs.gitea.com">帮助</a>
    <div class="divider"></div>
    <!-- 第6个：保留 -->
    <a class="item" href="/-/admin">后台</a>
    <div class="divider"></div>
    <!-- 第7个：保留 -->
    <a class="item" href="/user/logout">退出</a>
</div>

CSS 实现方式

/* 方式一：精确匹配（推荐） */
.menu.user-menu a[href="/XIGE?tab=stars"],
.menu.user-menu a[href="/notifications/subscriptions"],
.menu.user-menu a[href="https://docs.gitea.com"] {
    display: none !important;
}

/* 方式二：包含匹配（适用于 href 带有动态参数的情况） */
.menu.user-menu a[href*="tab=stars"],
.menu.user-menu a[href*="/notifications/subscriptions"],
.menu.user-menu a[href*="docs.gitea.com"] {
    display: none !important;
}

/* 方式三：使用 ID 选择器（如果有固定 ID） */
#_aria_dropdown_item_6,
#_aria_dropdown_item_7,
#_aria_dropdown_item_9 {
    display: none !important;
}

应用场景扩展

/* 1. 隐藏特定域名的外部链接 */
a[href^="https://"]:not([href*="yourdomain.com"]) {
    display: none;
}

/* 2. 隐藏包含特定关键词的链接 */
a[href*="ad"],
a[href*="sponsor"] {
    display: none;
}

/* 3. 隐藏特定文件类型的下载链接 */
a[href$=".zip"],
a[href$=".exe"] {
    display: none;
}

注意事项

1. 使用 !important 的场景：在用户自定义样式（如浏览器扩展、油猴脚本）或需要覆盖内联样式时
2. 选择器优先级：属性选择器的权重与 class 选择器相同（0,0,1,0），低于 ID 选择器
3. 性能考虑：属性选择器性能略低于 class 选择器，但现代浏览器差异可忽略

调试技巧

在浏览器控制台中测试选择器是否匹配到正确元素：

document.querySelectorAll('.menu.user-menu a[href*="tab=stars"]')

总结

最佳实践：优先使用 href 精确匹配或 ID 选择器，避免依赖元素顺序。