JS动态添加类样式冲突 网格视图隐藏rawsub类作用于列表视图如何解决

实现方案 #

在现有<style>代码块中新增一条CSS规则即可，利用CSS的:not()否定伪类精准匹配仅含animation-2类、未添加liststyle类的网格视图容器，隐藏内部的rawsub元素：

/* 仅网格视图下隐藏rawsub */
.animation-2:not(.liststyle) .rawsub {
    display: none !important;
}

规则说明 #

• .animation-2:not(.liststyle) 选中所有包含animation-2类、且不包含liststyle类的容器，对应网格视图的容器状态
• 该规则仅作用于网格视图，不会影响添加了liststyle类的列表视图，rawsub在列表视图下会正常显示

修改完成后的完整样式代码参考：

<style>
.tablinks.selected{
 color:red;
 }
.tablinks.selected{
 background-color: #FDB813;
 color: white;
}
.liststyle article div img{
    display: none!important;
}
.liststyle .poster{
    height: auto!important;
    padding-top: 10%!important;
}
.liststyle article{
    width: 100%!important;
    height: auto!important;
}
/* 新增网格视图隐藏rawsub规则 */
.animation-2:not(.liststyle) .rawsub {
    display: none !important;
}
</style>

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