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

仅在第二个margin-top

上更改div

Answer 2

nth-of-type工作得很好，但是你很遗憾的是margin-top：50px in（.ctabutton .viewbutton）选择器，而不是用viewbutton：nth-of-type（2）选择器覆盖它。如果你想增加25px，你必须说75px而不是25px（50px + 25px）

：nth-child和：nth-of-type不工作

2 个答案:

：nth-​​child和：nth-​​of-type不工作

2 个答案:

：nth-child和：nth-of-type不工作