列表項目菜單上的：last-child問題

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代碼無法正常工作。 我只希望最后一個菜單具有padding: 0px;

我究竟做錯了什么？

Answer 1

您的問題還不清楚。 如果您要使整個彩色背景區域都可單擊，那么您在正確的軌道上使用a而不是li上的填充。 您仍然可以定位所需的目標，只需稍微調整選擇器即可。 這是一個叉子。

 .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元素並在其中定位a

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