第一個孩子沒有在css中工作

下面是html和css代碼，我想問一個問題：爲什麼第一個孩子不工作？誰能告訴我，我會很感激你的答案。第一個孩子沒有在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>

來源

2017-05-05 Feng Li

我沒有看到一個左邊框的第一個元素？ – Jer

你正在編譯在常規的CSS或在[sass]（http://sass-lang.com/）？ –

@大衛我很抱歉，我少編寫，但我選擇到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: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>

來源

2017-05-05 08:53:50

我有一個條件，每一行都有不同的風格，但包含兩行具有相同的風格，而第二行的margin-bottom沒有，所以這個解決方案不適合我。非常感謝 –

在你的情況下，它應該是:first-of-type而不是:first-child，因爲你有一個不同的類作爲ul的first-child。

例子：

&: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。所以如果你的第一個孩子沒有正確的名字，它就會失敗。

來源

2017-05-05 08:57:40

在我將「first-of-type」從「first-child」改成 –

您的語法錯誤。 &：懸停{}是無效的CSS代碼。您可以在SASS或LESS或其他預處理器中使用&，但不能使用純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; 
 
} 
 
.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>

來源

2017-05-05 08:58:53

後，它仍然不起作用我在較少的環境中運行，將其張貼到代碼片段中，忘記將其更改爲css，我已經更改這個問題。謝謝你幫我找到錯誤。 –

你的主要問題在這裏是班級的第一li項目。它被設置爲.show-first，當所有其他設置爲只有.show。您必須將您的班級更改爲.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>

來源

2017-05-05 09:09:04 snkv

第一個孩子沒有在css中工作

回答

相關問題