如何使用CSS隐藏Jellyfin电影页指定ID为trailersTab的内容且不影响其他页面

解决方法 #

1. 隐藏电影页的预告片内容面板 #

你之前写的#trailersTab选择器优先级不够，被Jellyfin默认样式覆盖了，补充父级限定提升优先级即可生效：

#moviesPage #trailersTab {
  display: none !important;
}

这段代码只会选中电影页下的预告片标签内容，不会影响其他页面的同结构元素。

2. 仅隐藏电影页的顶部预告片标签按钮 #

你之前的写法失效是因为选择器顺序写反了：#moviesPage是body的子元素，把父元素写在子元素后面永远匹配不到任何节点。
现在主流浏览器（包括Jellyfin客户端内嵌的WebView）都支持:has()选择器，可以直接通过判断当前页面是否为电影页来限定生效范围：

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

如果你的运行环境不支持:has()选择器，可以用简单的JS辅助实现：

// 监听页面切换，给body添加电影页标识类
const observer = new MutationObserver(() => {
  if (document.querySelector('#moviesPage.ui-page-active')) {
    document.body.classList.add('is-movie-page')
  } else {
    document.body.classList.remove('is-movie-page')
  }
})
observer.observe(document.body, { subtree: true, attributeFilter: ['class'] })

配套CSS写法：

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

内容的提问来源于stack exchange，提问作者Antony aka Billybob