如何防止具有特定属性的 HTML 标记在 Google Chrome 中显示答案

【问题标题】：How to prevent a HTML tag with a certain attribute from displaying in Google Chrome如何防止具有特定属性的 HTML 标记在 Google Chrome 中显示
【发布时间】：2018-06-22 15:06:48
【问题描述】：

我一直在使用 Stylish，它是 Google Chrome 的一个扩展程序，用于阻止烦人的广告和其他项目的显示。基本上，您需要标签的类名或 id，并且您可以阻止它在网站加载时显示。

我有以下项目，我也想停止显示，但它没有 id，并且类名与我要显示的其他 li 项目通用。

<li role="rowgroup" data-test-id="infinite-scroll-AD" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);"></li>

在这种情况下，我需要定位 data-test-id="infinite-scroll-AD" 但如何在 Stylish 或 Google Chrome 浏览器支持的其他扩展程序中执行此操作？

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

这应该可以解决问题：

[data-test-id="infinite-scroll-AD"] {
    display: none; /* Or whatever */
}

见Using data attributes。

此外，如果您的data-test-id 的AD 部分是某种广告标识符，并且您想隐藏所有可以使用的内容：

[data-test-id^="infinite-scroll-"] {
    display: none; /* Or whatever */
}

含义选择任何具有以infinite-scroll-开头的data-test-id的元素

更多信息请参见Attribute selectors。

【讨论】：

【解决方案2】：

您可以像往常一样使用 css：

li[role="rowgroup"][data-test-id="infinite-scroll-AD"] {
   display: none;
}

【讨论】：

【解决方案3】：

我不使用 Stylish，但如果您正在学习编码，您可以使用 .可能想知道您可以在开发控制台中自己完成。

打开开发控制台：
- 按 Ctrl+Shift+J (Windows / Linux) 或 Cmd+Opt+J (Mac)。
- 如果 DevTools 已打开，请按控制台按钮。
- developers.google.com
输入document.querySelector('[data-test-id=infinite-scroll-AD]').style.display = 'none';
瞧！

这不会持续到页面刷新。您每次都必须手动执行此操作。或者，您也可以在控制台中更改您的 CSS。您必须检查元素（从右键单击/上下文菜单中），然后在样式下的右侧面板中添加规则 display: none

【讨论】：

【解决方案4】：

您可以使用 jQuery $( window ).load() 方法来实现，然后像这样定位您的元素：

$('li[data-test-id="infinite-scroll-AD"]').css("display", "none");   //apply to all

如果您只想定位first element：

$('li[data-test-id="infinite-scroll-AD"]:first').css("display", "none");

这是一个例子：

$( window ).load(function()
{
   $('li[data-test-id="infinite-scroll-AD"]').css("display", "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li role="rowgroup" data-test-id="infinite-1" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">This is some text</li>
    <li role="rowgroup" data-test-id="infinite-scroll-AD" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">This is THE AD</li>
    <li role="rowgroup" data-test-id="infinite-2" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">Some other text</li>
</ul>

注意： $( window ).load() 在执行前等待整个 HTML 页面加载完毕，包括脚本、CSS、图像等。另一种方法是使用$( document ).ready()，它只等待DOM 加载，然后执行。

【讨论】：