使用浏览器的自定义样式表-如何在netflix上隐藏特定的节目？

Question

我最近了解到，我们可以使用自定义样式表来操作Internet上的网站元素。

我有一个问题，最终我浪费了很多时间在netflix上观看狂欢，然后我后悔这样做。因此，我想隐藏上瘾的节目-在本例中为“箭头”。

我相信不久以后还会有另一个迷上我，并且我将使用相同的技术来隐藏它，直到我克服它为止。

来自Netflix的Arrow的CSS是：

<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>

此嵌套在几个div内，最外面的div可能会有所不同，因为可以在不同的滑块下多次显示节目。

我上面提到的这个CSS选择器的直接父对象是：

<div class="bob-overlay bob-overlay-hidden">
<div class="bob-play-hitzone"></div>
<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
<div class="bob-overview-wrapper">
    <div class="bob-overview">
        <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
            <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
        </a>
        <div class="bob-title">
            Arrow
        </div>
        <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
            <span><b>S5:E7</b> "Vigilante"</span>
        </div>
    </div>
    <div class="bob-content-warning-wrapper"></div>
</div>

我尝试在自定义样式表中添加以下内容，但没有任何区别。

a[aria-label="Arrow"] { display: none; }

关于如何编写将匹配并隐藏此显示的css选择器的任何建议？

Answer 1

听起来您可能想隐藏包含bob-overlay元素的整个aria-label="Arrow"容器] >>。 CSS不能从孩子中选择父母，但是您可以使用Javascript轻松地做到这一点。安装类似Tampermonkey的用户脚本管理器，然后搜索与a[aria-label="Arrow"]匹配的元素，找到其祖先.bob-overlay，然后删除它们（或将它们的显示设置为无）：

for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}
<div class="bob-overlay bob-overlay-hidden">
  arrow - hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        Arrow
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

<div class="bob-overlay bob-overlay-hidden">
  not arrow, don't hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Foobar" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        something else
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

如果元素是动态加载的，并且在初始页面加载时不存在，则可能必须在setTimeout或（或setInterval轮询或MutationObserver）之后运行JS。

整个用户脚本可能看起来像

// ==UserScript==
// @name             Hide Arrow
// @include          https://www.netflix.com/*
// @grant            none
// ==/UserScript==

for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}