:nth-child 和 :nth-of-type 不起作用答案

【问题标题】：:nth-child and :nth-of-type not working:nth-child 和 :nth-of-type 不起作用
【发布时间】：2014-07-24 07:01:57
【问题描述】：

我有 3 个按钮，对于第二个按钮，我试图为其添加额外的边距，但由于某种原因，nth-child 和 nth-of-type 根本没有改变外观。我猜我只是不明白它们是如何工作的，所以如果有人能传播一种小小的爱，那就太好了！

css代码：

.ctabutton .viewbutton {
    height: 30px;
    width: 150px;
    border-radius: 30px;
    background-color: white;
    margin: auto;
    text-align: center;
    line-height: 30px;
    margin-top: 50px;
}

.viewbutton:nth-of-type(2) {
    margin-top: 25px;

}

html代码：

<div class="viewbutton"><a href="http://google.com">View</a></div>

【问题讨论】：

提供一个小提琴，看看究竟是什么问题，nth-of-type 和 nth-child 之间的区别，请阅读：css-tricks.com/the-difference-between-nth-child-and-nth-of-type

标签： html css css-selectors

【解决方案1】：

它应该可以正常工作...也许您的HTML 有问题。

试试这个：

HTML：

<div class="ctabutton">
    <div class="viewbutton"><a href="http://google.com">View</a>
    </div>
    <div class="viewbutton"><a href="http://google.com">View</a>
    </div>
    <div class="viewbutton"><a href="http://google.com">View</a>
    </div>
</div>

CSS：

.ctabutton .viewbutton {
    height: 30px;
    width: 150px;
    border-radius: 30px;
    background-color: white;
    margin: auto;
    text-align: center;
    line-height: 30px;
    margin-top: 50px;
}
.viewbutton:nth-of-type(2) {
    margin-top: 25px;
}

JSFiddle Demo

它只在第二个div 上更改margin-top

【讨论】：

【解决方案2】：

nth-of-type 工作正常，但你在 (.ctabutton .viewbutton) 选择器中的 margin-top: 50px 比你用 viewbutton:nth-of-type(2) 选择器覆盖它感到难过。如果要添加额外的 25px，则必须说 75px 而不是 25px (50px+25px)

【讨论】：

我通过 .ctabutton:nth-of-type(2) .viewbutton { margin-top: 25px; 解决了这个问题感谢您的建议！