Question

你能否告诉我为什么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

Answer 1

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

你基本上说的是：如果它是.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，但是您可能还有其他原因，所以我会留下让您决定。

Answer 2

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

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

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

<强> Demo here

Answer 3

在您的代码.button_account_bar中是父类，因此它的最后一个孩子是div，哪个类是＆＃34; toggle_button_div，因此".button_account_bar > .button:last-child"的样式不起作用div-class="toggle_button_div" div-class="button_account_bar"在last-of-type之外，以确保您的风格正常工作，您的代码绝对可行。或者您可以使用last-child代替public class GuessGame

为什么CSS没有在最后一个按钮上工作？

3 个答案: