2个div上的条件CSS

Question

嗨，我有一个HTML页面，只有在满足两个条件的情况下，我才想在其中包含CSS。

HTML页面将始终具有id为flipbook-page3-front 的div

HTML页面有时会有id为pagesFlipbook 的div

这些div不是兄弟，也不在之后

只有当div pagesFlipbook存在时，我才想在flipbook-page3-front上创建一些CSS。有可能吗。这是我的CSS没有任何条件：

.flipbook-page3-front{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}

Answer 1

只有当您有父div的类pagesFlipbook时，这才会起作用，因此它会产生影响。

像这样编写条件CSS。

.pagesFlipbook .flipbook-page3-front { /* write css */ }

Answer 2

是的，这是可能的，请参阅下面的代码。。。

const element = document.querySelector('#pagesFlipbook')
if(element != null){
document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
}

您可以在CSS中声明以下类来完成此操作。。。

.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}