2017-05-05 27 views
0

working Das unten war der HTML-und CSS-Code, und ich möchte die Frage stellen: Warum das erste Kind nicht funktioniert? Wer kann mir sagen, ich werde für Ihre Antwort zu schätzen wissen.erstes Kind war nicht in css

.footerLinks { 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 
.show{ 
 
    display: inline-block; 
 
    zoom:1; 
 
    *display:inline; 
 
    color:#eee; 
 
    padding:4px 14px; 
 
    border-top:1px solid rgba(0,0,0,0); 
 
    border-left:1px solid red; 
 
} 
 
.footerLinks li a:hover{ 
 
    color: red; 
 
    border-top:1px solid #fff; 
 
} 
 
.footerLinks .show:first-of-type{ 
 
    border-left:none; 
 
}
<nav role='navigation'> 
 
    <ul class="footerLinks"> 
 
    <li class="show-first"><a href="#">Home</a></li> 
 
    <li class="show"><a href="#">About</a></li> 
 
    <li class="show"><a href="#">Clients</a></li> 
 
    <li class="show"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>

+0

Ich habe keinen linken Rand an dem ersten Element sehen? – Jer

+0

Kompilieren Sie in regelmäßigen CSS oder in [Sass] (http://sass-lang.com/)? –

+0

@David Es tut mir leid, ich kompiliere in weniger, aber ich wähle es in CSS, es funktioniert immer noch nicht. –

Antwort

1

.footerLinks { 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 
.show{ 
 
    display: inline-block; 
 
    zoom:1; 
 
    *display:inline; 
 
    color:#eee; 
 
    padding:4px 14px; 
 
    border-top:1px solid rgba(0,0,0,0); 
 
    border-left:1px solid red; 
 
} 
 
.footerLinks li:first-child{ 
 
\t border-left:none; 
 
}
<nav role='navigation'> 
 
    <ul class="footerLinks"> 
 
    <li class="show first"><a href="#">Home</a></li> 
 
    <li class="show"><a href="#">About</a></li> 
 
    <li class="show"><a href="#">Clients</a></li> 
 
    <li class="show"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>

+0

Ich habe eine Bedingung, jede Zeile hat einen anderen Stil, aber zwei Zeilen enthalten den gleichen Stil, und der Rand der zweiten Zeile war keins, daher passt diese Lösung nicht zu mir. Vielen Dank –

0

In Ihrem Fall sollte es :first-of-type statt :first-child sein, da Sie eine andere Klasse als die first-child des ul haben.

Beispiel:

&:first-of-type { 
     border-left:none; 
    } 

Oder Sie können das erste li Element aus dem ul wie unten bewegen.

.footerLinks { 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 
.show{ 
 
    display: inline-block; 
 
    zoom:1; 
 
    *display:inline; 
 
    color:#eee; 
 
    padding:4px 14px; 
 
    border-top:1px solid rgba(0,0,0,0); 
 
    border-left:1px solid red; 
 
    &:hover { 
 
     color:#fff; 
 
     border-top:1px solid #fff; 
 
    } 
 
    
 
} 
 
.show:first-child { 
 
    border-left:none; 
 
}
<nav role='navigation'> 
 
    <div class="show-first"><a href="#">Home</a></div> 
 
    <ul class="footerLinks"> 
 
    <li class="show"><a href="#">About</a></li> 
 
    <li class="show"><a href="#">Clients</a></li> 
 
    <li class="show"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>

Der Grund dafür ist, dass, wenn Sie :first-child Wähler mit Klasse verwenden, ist es eher wie li:first-child.class-name verhält. Wenn also Ihr erstes Kind keinen korrekten Klassennamen hat, schlägt es fehl.

+0

Es funktioniert immer noch nicht, nachdem ich die "First-of-Type" von "First-Kind" geändert –

0

Sie haben falsche Syntax. &: Hover {} ist kein gültiger CSS-Code. Sie können & in SASS oder LESS oder einem anderen Preprocester verwenden, aber nicht in reinem CSS. Sie brauchen diese Klasse "show-first" wahrscheinlich nicht und tun es mit: first-child.

Arbeitscode:

.footerLinks { 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 
.show{ 
 
    display: inline-block; 
 
    zoom:1; 
 
    display:inline; 
 
    color:#eee; 
 
    padding:4px 14px; 
 
    border-top:1px solid rgba(0,0,0,0); 
 
    border-left:1px solid red; 
 
} 
 
.show:hover { 
 
    border-top:1px solid #fff; 
 
} 
 
.show:hover a { 
 
    color:#fff; 
 
} 
 
.show:first-child { 
 
    border-left:none; 
 
}
<nav role='navigation'> 
 
    <ul class="footerLinks"> 
 
    <li class="show"><a href="#">Home</a></li> 
 
    <li class="show"><a href="#">About</a></li> 
 
    <li class="show"><a href="#">Clients</a></li> 
 
    <li class="show"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>

+0

Ich runed in weniger Umgebung, posten Sie es in das Snippet, vergessen, es in CSS zu ändern, habe ich bereits geändert die Frage. Danke, dass Sie mir helfen, den Fehler zu finden. –

0

Ihr Hauptproblem hier ist die Klasse der ersten li Artikel. Es ist auf .show-first eingestellt, wenn alle anderen nur auf .show eingestellt sind. Sie müssen Ihre Klasse in .show.first ändern, damit .first eine Modulator-Klasse und nicht ein ganz neuer Klassenname wie .show-first sein kann.

Der first-child Selektor funktioniert gut, es muss nur die erste .show Klasse sehen, das ist alles.

.footerLinks { 
 
    margin:0 auto; 
 
    list-style: none; 
 
} 
 
.show{ 
 
    display: inline-block; 
 
    zoom:1; 
 
    *display:inline; 
 
    color:#eee; 
 
    padding:4px 14px; 
 
    border-top:1px solid rgba(0,0,0,0); 
 
    border-left:1px solid red; 
 
} 
 
.footerLinks li:hover{ 
 
    color: red; 
 
    border-top:1px solid #fff; 
 
} 
 
.footerLinks .show:first-child { 
 
    border-left:none; 
 
}
<nav role='navigation'> 
 
    <ul class="footerLinks"> 
 
    <li class="show first"><a href="#">Home</a></li> 
 
    <li class="show"><a href="#">About</a></li> 
 
    <li class="show"><a href="#">Clients</a></li> 
 
    <li class="show"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</nav>