为什么 CSS 在最后一个按钮上不起作用？ [复制]答案

【问题标题】：Why the CSS is not working on last button? [duplicate]为什么 CSS 在最后一个按钮上不起作用？ [复制]
【发布时间】：2019-05-24 14:59:34
【问题描述】：

你能告诉我为什么 CSS 在最后一个按钮上不起作用。实际上我给按钮栏的最后一个按钮加上边框。我也将重要应用于最后一个按钮或栏。但它没有采用 CSS。这是我的最后一个按钮 CSS：

.button_account_bar > .button:last-child {
    border-top-right-radius: 8px!important;
    border-bottom-right-radius: 8px!important;
}

http://codepen.io/anon/pen/oXdoBy

【问题讨论】：

标签： javascript html css

【解决方案1】：

问题是因为last-child 意味着它必须是父级的最后一个子级。将其应用于.button 并不意味着“最后一个子按钮”，它仍然必须是最后一个子按钮，无论它是否是按钮。

您的基本意思是：如果是.button，则应用样式AND如果是last-child

看来你可以改用last-of-type：

.button_account_bar > .button:last-of-type {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

您可以查看浏览器对 last-of-type here 的支持

请注意，您实际上根本不需要!important，但您可能有其他原因，所以我将把它留给您决定。

【讨论】：

哦...那么如何在按钮栏的最后一个按钮中添加css
支持看起来很不错caniuse.com/#feat=css-sel3，很好的答案
@kamienok：我正要自己发布那个链接.. 没有我最初预期的那么糟糕

【解决方案2】：

最后一个按钮不是其父级的最后一个子级。您还有另一个元素 .toggle_button_div 作为 .button_account_bar 的最后一个子元素。

解决此问题的一种方法是将按钮包装在新的 <div> 中，然后在您的 CSS 规则中引用它：

.button_account_bar > div > .button:last-child {
    ...

Demo here

【讨论】：

哦...那么如何在按钮栏的最后一个按钮中添加css

【解决方案3】：

在您的代码中，.button_account_bar 是父类，因此它的最后一个子类是 div，该类是“toggle_button_div，因此".button_account_bar > .button:last-child" 的样式不起作用在div-class="button_account_bar" 之外使用div-class="toggle_button_div"，以便您的正常工作样式，并且绝对可以使用您的代码。或者您可以使用last-of-type 代替last-child

【讨论】：