問題有：一個列表項菜單最後孩子

Question

這是我更新的jsfiddle：https://jsfiddle.net/axosonns/2/

HTML：

<ul class="whatever"> 
    <li><a href="#">Menu1</a></li> 
    <li><a href="#">Menu2</a></li> 
    <li><a href="#">Menu3</a></li> 
    <li><a href="#">Menu4</a></li> 
</ul> 

CSS：

.whatever li { 
    display: inline-block; 
} 
.whatever li>a { 
    background: grey; 
    padding: 10px 15px; 
} 
.whatever li>a:last-child { 
    padding: 10px 0 10px 15px; 
    background-color: red; 
} 

最後一個孩子的CSS代碼ISN」不工作。我只想要最後一個菜單有padding: 0px;

我在做什麼錯了？

Answer 1

你的問題有點不清楚。如果您試圖使整個彩色背景區域可點擊，則表明您處於正確的軌道上 - 在a上使用填充而不是li。你仍然可以瞄準你需要的那個，只需稍微調整一下選擇器即可。 Here's a fork with that.

.whatever li { 
 
    display: inline-block; 
 
} 
 

 
.whatever li a { 
 
    background: grey; 
 
    display: block; 
 
    padding: 10px 15px; 
 
} 
 
.whatever li:last-child a { 
 
    padding: 10px 0 10px 15px; 
 
    background-color: red; 
 
}

<ul class="whatever"> 
 
    <li><a href="#">Menu1</a></li> 
 
    <li><a href="#">Menu2</a></li> 
 
    <li><a href="#">Menu3</a></li> 
 
    <li><a href="#">Menu4</a></li> 
 
</ul>

Answer 2

你在每個li選擇的a最後一個元素， 你必須選擇最後li元素，在

.whatever li>a:last-child這個.whatever li:last-child a

.whatever li { 
 
    display: inline-block; 
 
} 
 
.whatever li>a { 
 
    background: grey; 
 
    padding: 10px 15px; 
 
} 
 
.whatever li:last-child a{ 
 
    padding: 10px 15px 10px 15px; 
 
    /* padding: 0px; */ 
 
    background-color: red; 
 
}

<ul class="whatever"> 
 
    <li><a href="#">Menu1</a></li> 
 
    <li><a href="#">Menu2</a></li> 
 
    <li><a href="#">Menu3</a></li> 
 
    <li><a href="#">Menu4</a></li> 
 
</ul>

目標 a