html - 使用 css 隐藏特定的 div id 内容？

Question

我试图修改 jellyfin 以帮助希望使用 js 和 html 与 css 修改删除预告片选项卡的 reddit 用户，并遇到了一些应该很容易（使用 css）但我无法解决的问题。

我有这个代码：

<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">
  <div class="pageTabContent" id="moviesTab" data-index="0">
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>      <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button> </div>
    <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"> </div>
    <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"> </div>
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div>
    </div>
  </div>
  <div class="pageTabContent" id="suggestionsTab" data-index="1">
    <div id="resumableSection" class="verticalSection hide">
      <div class="sectionTitleContainer sectionTitleContainer-cards">
        <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
      </div>
      <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right"> </div>
    </div>
    <div class="verticalSection">
      <div class="sectionTitleContainer sectionTitleContainer-cards">
        <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h2>
      </div>
      <div is="emby-itemscontainer" id="recentlyAddedItems" class="itemsContainer padded-left padded-right"> </div>
    </div>
    <div class="recommendations"> </div>
    <div class="noItemsMessage hide padded-left padded-right"> <br/>
      <p>${MessageNoMovieSuggestionsAvailable}</p>
    </div>
  </div>
  <div class="pageTabContent" id="trailersTab" data-index="2">
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>      </div>
    <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> </div>
    <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"> </div>
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div>
    </div>
  </div>
  <div class="pageTabContent" id="favoritesTab" data-index="3">
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button> </div>
    <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
    </div>
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div>
    </div>
  </div>
  <div class="pageTabContent" id="collectionsTab" data-index="4">
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>      <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><span class="material-icons add"></span></button> </div>
    <div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center">
    </div>
    <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
      <div class="paging"></div>
    </div>
  </div>
  <div class="pageTabContent" id="genresTab" data-index="5">
    <div id="items"></div>
  </div>
</div>

我想要做的是隐藏预告片我尝试了以下但它没有工作

#trailersTab {
  display: none !important;
}


/*also tried*/

#moviesPage body>div.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred>div.headerTabs.sectionTabs>div>div>button:nth-child(3) {
  display: none !important
}

但他们没有工作我可以开始工作的唯一部分是以下

body>div.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred>div.headerTabs.sectionTabs>div>div>button:nth-child(3) {
  display: none !important
}

但是上面的示例隐藏了每个页面上的第三个按钮，而不仅仅是电影页面

标签： htmlcss