css - 无法让 "nth-last-child"工作

标签 css css-selectors

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

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

最佳答案

尝试以下操作。我假设您不想将 css 应用到最后一个 ul li 元素。

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

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

CSS3 :nth-last-child() Selector

关于css - 无法让 "nth-last-child"工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29028623/

相关文章:

css - 将自定义属性与@page 规则一起使用

html - CSS:无法选择标题中的元素?

div 和 span 中的 CSS 类 IMG

jquery - 使用 phpQuery 选择特定文本节点

PHP结合ElseIf语句在一行输出

css - 如何根据父div中子div的数量设置div的高度

JQuery Themeroller css 包装 Accordion header

css - 为什么我的页脚一直向下?

html - 表格在 div html 中没有正确显示

html - ":last-child"和 ":not(:last-child)"之间的不同行为