尝试将样式应用于除最后一个元素之外的所有元素。但它不起作用。尝试了所有这些:
- ul li:
- not(ul li:nth-last-child)
- 李:不是(倒数第n个孩子)
- 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() 选择器
尝试将样式应用于除最后一个元素之外的所有元素。
为什么不使用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>