CSS3を使用して特定の親要素にスタイルをスキップする方法

Question

私は以下の方法でHTMLページ構造を持っていますが、私は特定のページだけにスタイルを適用したいと思います。ないが、動作していない。ここで

は、私が「サインアップ-STEP2」

<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>