PreCSS nisten nicht funktioniert

Ich habe folgende CSS Erklärung des Plugins precss PostCSS mit:PreCSS nisten nicht funktioniert

.woocommerce-account.logged-in { 

    .myaccount-hamburger{ 
     display: block; 
    } 

    .woocommerce{ 
     position: static; 
    } 

    #main{ 
     position: relative; 
    } 

    .site-header{ 
     margin-bottom: 0; 
    } 

}

Aber aus welchem Grund auch immer, die .woocommerce Regel nicht angewendet wird. Irgendwelche Hinweise warum? Ich weiß, dass es sich um einen gültigen Selektor handelt, denn wenn ich anfange, herumzuspielen und einige der anderen Deklarationen zu entfernen, funktioniert es tatsächlich.

Bitte beachten Sie, dass, wenn ich jede Regel manuell erweitern, alles funktioniert. Daher ist es ein Problem mit der Verschachtelung:

.woocommerce-account.logged-in .myaccount-hamburger{ 
    display: block; 
} 

.woocommerce-account.logged-in .woocommerce{ 
    position: static; 
} 

.woocommerce-account.logged-in #main{ 
    position: relative; 
} 

.woocommerce-account.logged-in .site-header{ 
    margin-bottom: 0; 
}

Auf Anfrage gibt es hier einige HTML. Es gibt eine Menge von HTML so dass ich die Grundlagen zeigen würde ...

<body class="woocommerce-account logged-in"> 
    <header class="site-header"></header> 
    <main id="main"> 
     <div class="myaccount-hamburger"></div> 
     <div class="woocommerce"></div> 
    </main> 
</body>

Quelle

2016-06-21 Jordan Carter

Bitte posten Sie auch Ihren HTML-Code, da @MattheusBicas Antwort möglicherweise korrekt ist, aber es gibt keine Möglichkeit, sicher zu wissen. (Es gibt auch keine Möglichkeit, das Problem ohne HTML zu finden). Wenn möglich, poste auch deinen _output_. – somethinghere

Die Ausgabe ist, dass jede Stilregel angewendet wird, mit Ausnahme der Tatsache, dass .woocommerce nicht in statisch geändert wurde. –

Entfernen Sie die Punkte in den Klassennamen in der Markup .... – Red2678

-1

Sie benötigen einen Raum zwischen „.woocommerce-Konto“ setzen und „.logged-in“

So:

.woocommerce-account .logged-in { 

}

Wenn Ihr divs sind wie folgt aus:

<div class = "woocomerce-account"> 
    <div class = "logged-in"> 
    </div> 
</div>

Hope that = hilft)

EDIT: keine Punkte vor den Worten wie diese Aktualisierung für Ihre Frage

Ich glaube, ich dein Problem, haben Sie muss

<body class=".woocommerce-account .logged-in">

gefunden:

<body class="woocommerce-account logged-in">

Hoffnung, die jetzt hilft!

Wenn es nicht hilft, ist das Problem wahrscheinlich an einem anderen Ort außerhalb dieses Stück Code.

Quelle

2016-06-21 16:22:39

Nein, ich sage, es ist .woocommerce-account, das auch .logged-in als eine Klasse hat.

Dann machst du es richtig, es gibt kein Problem in diesem Tag, das Problem ist in einem anderen Tag vielleicht, post Ihre gesamte div-Struktur (nur die wichtigen), Überprüfen Sie meine neue Bearbeitung. –

Ich aktualisierte meine Antwort mit HTML. Beachten Sie auch den Abschnitt über das erweiterte CSS-Arbeiten. Es ist nur die verschachtelte Version, die aus irgendeinem Grund fehlschlägt. –

Sie werden wahrscheinlich ein wenig mehr Kontext bieten, um eine Antwort zu erhalten, aber es ist möglich, dass Sie position: static; für position: fixed; verwechseln.

Statisch ist der Standardwert für die Position. Wenn Sie es nicht anders eingestellt haben (d. H. In einem anderen Code als dem oben genannten), bleibt es unverändert.

Quelle

2016-06-21 16:36:04 dave

Das ist die Antwort! – Red2678

Dies ist nicht die Antwort. Position statisch war beabsichtigt. Das Problem hat mit der Verschachtelung zu tun. Wenn ich das CSS wie in meiner Frage erweitere, funktioniert es genau so, wie ich es möchte, aber aus irgendeinem Grund wird die statische Regel nicht angewendet, wenn ich es verschachtele. Vergessen Sie die tatsächlichen Regeln selbst an dieser Stelle. Tatsache ist, dass Styling manchmal überhaupt nicht angewendet wird, wenn ich neste, aber wenn ich es erweitere. –

Antwort

Verwandte Themen