为什么CSS不能在最后一个按钮上工作？

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并不意味着“最后一个孩子的按钮”，它仍然必须是最后一个孩子，不管它是否是按钮。

什么你基本上说的是：应用样式，如果它是一个.button和如果它是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-typehere

请注意，根本不需要!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其类是“toggle_button_div，所以样式为” .button_account_bar> .button：最后的孩子”不工作使用DIV级=‘toggle_button_div’在div-class =“button_account_bar”之外，以便适合你的风格，并且你的代码绝对可行。或者你可以使用last-of-type来代替last-child