2017-09-09 11 views
1

Ich habe ein Problem mit einem Menü in Wordpress und ich habe versucht, den Code erneut auf Codepen schreiben, aber ich denke, ich mache etwas falsch, weil es nicht funktioniert, weder dort. Hier ist das Problem:: nicht Selektor funktioniert nicht

.nav-primary *:not(.sub-menu) a 
{ 
    font-size: 20px; 
} 

Wenn ich die verwenden: nicht Wähler meinen Code nicht funktioniert, aber wenn ich es löschen, es funktioniert mit allen Elementen.

.nav-primary a { 
 
color: white; 
 
background-color: #3A3F4E; 
 
border: 0; 
 
} 
 

 
.nav-primary li:nth-child(2) 
 
{ 
 
\t font-family: Oswald; 
 
} 
 

 
.nav-primary li:first-child 
 
{ 
 
\t font-family: Oswald; 
 
\t position: relative; 
 
\t top: -1px; 
 
} 
 

 
.nav-primary li:first-child:hover 
 
{ 
 
\t position: relative; 
 
\t top: -1px; 
 
} 
 

 
.nav-primary .sub-menu a { 
 
color: white; 
 
background-color: #3A3F4E; 
 
} 
 

 
.nav-primary a:hover { 
 
color: white; 
 
text-decoration: none; 
 
background-color: #E56341; 
 
} 
 

 
.nav-primary > a 
 
{ 
 
    font-size: 20px; 
 
}
<div class="nav-primary"> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    <div class="sub-menu"> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    </div> 
 
</div>

oder Sie Here für codepen mit dem vollständigen Code überprüfen. Danke für die Hilfe

+0

Sie können '.nav-primary> a' –

+0

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). –

+0

Ich habe es auf der Website versucht, aber ich verstehe nicht, warum es keine Änderung macht ... – Jasmine

Antwort

1

Es funktioniert nicht, da das a-Tag, das Sie anvisieren möchten, Kinder von .nav-primary ist und kein anderes Elternteil ohne .sub-menu-Klasse hat.

Es funktioniert wie folgt:

.nav-primary a { 
 
color: white; 
 
background-color: #3A3F4E; 
 
border: 0; 
 
} 
 

 
.nav-primary li:nth-child(2) 
 
{ 
 
\t font-family: Oswald; 
 
} 
 

 
.nav-primary li:first-child 
 
{ 
 
\t font-family: Oswald; 
 
\t position: relative; 
 
\t top: -1px; 
 
} 
 

 
.nav-primary li:first-child:hover 
 
{ 
 
\t position: relative; 
 
\t top: -1px; 
 
} 
 

 
.nav-primary .sub-menu a { 
 
color: white; 
 
background-color: #3A3F4E; 
 
} 
 

 
.nav-primary a:hover { 
 
color: white; 
 
text-decoration: none; 
 
background-color: #E56341; 
 
} 
 

 
.nav-primary *:not(.sub-menu) a 
 
{ 
 
    font-size: 20px; 
 
}
<div class="nav-primary"> 
 
    <div class="dummy"> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    </div> 
 
    <div class="sub-menu"> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    <a>Home</a> 
 
    </div> 
 
</div>

+0

Ich habe nicht darüber nachgedacht, danke für die Hilfe! – Jasmine

Verwandte Themen