最初の子はcssで処理されていません

Question

以下はhtmlと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>

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

Answer 2

あなたがulのfirst-childとして別のクラスを持っているので、代わりに:first-childの:first-of-typeでなければなりません。

例：

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

それとも、以下のようにulのうち、最初のli要素を移動することができます。

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

の理由は、あなたがクラスに:first-childセレクターを使用している場合、それはより多くのli:first-child.class-nameのように振る舞う、ということです。したがって、最初の子が正しいクラス名を持たない場合、失敗します。

Answer 3

構文が間違っています。 &：hover {}は有効なCSSコードではありません。 SASSまたはLESSまたは他のプリプロセッサでは&を使用できますが、純粋なCSSでは使用できません。 "ショーファースト"クラスは必要ないでしょう：first-child。

の作業コード：

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

Answer 4

ここにあなたの主な問題は、あなたの最初のli項目のクラスです。他のすべてが.showに設定されている場合は、.show-firstに設定されます。クラス.show.firstに変更する必要があります。.firstは変調クラスになり、まったく新しいクラス名には.show-firstとはなりません。

first-childセレクタは正常に動作します。最初に.showクラスを見る必要があります。

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