问题有：一个列表项菜单最后孩子

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