html - :nth-child and :nth-of-type not working

Question

我有 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>

Answer 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