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。你仍然可以定位你需要的那个，只需稍微调整一下选择器。 Here's a fork with that.

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您在每个a中选择了li的最后一个元素，你必须选择最后一个li元素并在那个

中定位a

.whatever li>a:last-child到此.whatever li:last-child a

＆＃13;

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

＆＃13;

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

＆＃13;

问题：列表项菜单上的last-child

2 个答案: