如何在Chrome中隐藏含特定属性的HTML标签？Stylish实现方法

嘿，这个场景我太熟悉了！当class重复、又没id可用时，自定义属性就是救星，用CSS属性选择器就能精准搞定这个广告元素。下面是具体的实现方法：

Stylish本身就是靠注入自定义CSS生效的，直接用属性选择器定位目标元素就行：

1. 打开Stylish插件，点击「创建新样式」
2. 在代码编辑区粘贴以下CSS代码：

/* 精准隐藏带有指定data-test-id的广告li元素 */
li[data-test-id="infinite-scroll-AD"] {
    display: none !important;
}

3. 给这个样式起个名字（比如「隐藏滚动加载广告」），然后选择适用的网站：
   • 如果只在特定网站出现这个广告，选「特定网站」并输入对应域名
   • 如果多个网站都有这个标识，选「所有网站」
4. 保存后刷新页面，目标广告元素就会被彻底隐藏

为什么这个写法有用？ #

CSS的[attribute="value"]属性选择器可以直接匹配元素的自定义属性，data-test-id本身就是为测试/定位设计的属性，刚好适合这种class重复的场景。加上!important是为了确保你的样式优先级高于页面原生样式，避免被覆盖。

如果你不想用Stylish，也可以用更轻量的广告拦截工具uBlock Origin来实现：

1. 打开uBlock Origin的设置面板，切换到「我的规则」标签
2. 添加一条规则（把your-site.com换成实际网站域名，用*可以匹配所有网站）：

your-site.com##li[data-test-id="infinite-scroll-AD"]

3. 点击「更改应用」保存规则，刷新页面后广告就会消失

不管用哪种方法，都能精准定位到这个广告元素，不会误删其他class相同的正常内容。

内容的提问来源于stack exchange，提问作者NoobCoder