更改ul中最后一项的CSS

Question

我有一些看起来像这样的HTML：

<ul style="padding-left:12px; float:right;">
  <li style="display:inline; padding-right:2px;">content</li>
  <li style="display:inline; padding-right:2px;">content</li>
  <li style="display:inline; padding-right:2px;">content</li>
  <li style="display:inline; padding-right:2px;">content</li>
  <li style="display:inline; padding-right:0px;">content</li>
</ul>

我想通过使用样式来清理它。然而，最后一个李投入了一些事情。它的填充权为0而不是2.我的挑战是，这个HTML是以编程方式生成的。有没有办法我可以写我的CSS基本上说使用padding-right 2除了最后一个列表项以外的所有内容？如果是这样，怎么样？

谢谢！

Answer 1

Try this. this is te way 

<ul id="nav">
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ul>


ul#nav {
      padding-left:12px; 
      float:right;
     }
ul#nav li{
        display:inline; 
        padding-right:2px;
     }
ul#nav li:last-child{
        padding-right:0px;
      }

Answer 2

li:not(:last-child) { padding-right:2px !important; }

Answer 3

好吧，我不知道你将如何根据你发布的内容选择这个精确的ul，但这应该有效。

ul li:last-child {
    padding-right: 2px !important;
}

Answer 4

试试这个：

<ul style="padding-left:12px; float:right;" id="nav">
  <li style="display:inline; ">content</li>
  <li style="display:inline;">content</li>
  <li style="display:inline; ">content</li>
  <li style="display:inline; ">content</li>
  <li style="display:inline;">content</li>
</ul>

然后我们可以轻松地将最后一项的文字设为红色：

ul#nav li:last-child {
   color: Red; 
   padding-right:0px;
}
ul#nav li:not(:last-child) { 
   padding-right:2px; 
}

Answer 5

<ul style="padding-left:12px; float:right;">
  <li >content</li>
  <li >content</li>
  <li >content</li>
  <li >content</li>
  <li >content</li>
</ul>

ul li{display:inline; padding-right:0px;}

ul li:last-child{padding-right:0px;}

Answer 6

以下是您的解决方案：

问题。如何使用CSS清除最后一项以外的清单和样式列表？

<强>答。

li {display:inline; padding-right:2px;}
li:last-child {padding-right:0;}

如果想要选择/修改任何特定的子元素，如下所示：

**仅适用于＆＃34;首先＆＃34;子：**

li:first-child { //your css style here}

**仅适用于＆＃34; last＆＃34;子：**

li:last-child { //your css style here}

**对于任何特定的儿童使用＆＃34; nth-child＆＃34; **

li:nth-child(1) { //your css style here}
li:nth-child(2) { //your css style here}
li:nth-child(3) { //your css style here}
li:nth-child(4) { //your css style here}
li:nth-child(5) { //your css style here}