Question

尝试将样式应用于除最后一个元素之外的所有元素。但它不起作用。试过这一切：

ul li：not（ul li：nth-last-child）
ul li：not（nth-last-child）
ul li：not（：nth-last-child）

ul {
  list-style: none;
  margin: 0;
  float: left;
  width: 100%;
  text-align: center;
}
ul li {
  height: 54px;
  width: 54px;
  border-radius: 60px;
 
}

 /* /// THIS PART IS NOT WORKING PROPERLY 
 RIGHT NOW IT REMOVES MARGIN FOR ALL THE ELEMENTS/// */
 ul li:not(ul li:nth-last-child) {
 margin-left: 10px;
}

.red {background: #fc4c4f;}
.blue {background: #4fa3fc;}
.yellow {background: #ECD13F;}

<ul>
  <li class="red selected"></li>
  <li class="blue"></li>
  <li class="yellow"></li>
</ul>

Answer 1

尝试以下方法。我假设您不想将css应用于最后一个ul li元素。

ul > li:not(:last-child){
   margin-left: 15px;
}

:nth-last-child实际上需要一个可以查找的参数。

CSS3 :nth-last-child() Selector

Answer 2

尝试将样式应用于除最后一个元素之外的所有元素。

为什么不使用last-child？

ul {
  list-style: none;
  margin: 0;
  float: left;
  width: 100%;
  text-align: center;
}
ul li {
  height: 54px;
  width: 54px;
  border-radius: 60px;
}
ul li:not(:last-child) {
  margin-left: 10px;
}
.red {
  background: #fc4c4f;
}
.blue {
  background: #4fa3fc;
}
.yellow {
  background: #ECD13F;
}

<ul>
  <li class="red selected"></li>
  <li class="blue"></li>
  <li class="yellow"></li>
</ul>

无法得到＆＃34; n-last-child n＃34;上班

2 个答案: