如何跳过使用CSS3的特定父元素的样式

Question

我有以下方式的HTML页面结构，但我只想将样式应用于特定页面。

这里，我怎么跳过样式“注册，第二步”

<signup-step2 class="ion-page show-page" style="z-index: 100;"> 
    <ion-header></ion-header> 
    <ion-content class="signup-page content content-md" padding="" style=""> 
    </ion-content> 
</signup-step2> 

我尝试使用申请：不，但不工作。

ion-content{ 
    position: relative; 
    z-index: 1; 
    } 
    :not(signup-step2) ion-content:before { 
     content: ""; 
     position: absolute; 
     z-index: -1;  
     background: url('../assets/img/content-bg.png') 44% 100%;  
     opacity: .2; 
    } 

Answer 1

您可以将类添加到您的块，当它被用于注册，并使用这个类作为not()选择。它使代码更易于阅读和维护。

ion-content { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
signup-step2:not(.signup)>ion-content:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    background: url('../assets/img/content-bg.png') 44% 100%; 
 
    opacity: .2; 
 
}

<signup-step2 class="ion-page show-page" style="z-index: 100;"> 
 
    <ion-header></ion-header> 
 
    <ion-content class="signup-page content content-md" padding="" style=""> 
 
    </ion-content> 
 
</signup-step2>