html - 无法使用 nth-child 将标签中的 li 隔开

Question

http://codepen.io/leongaban/pen/uJDIw

---

嗨，所以在上面的codepen中，我试图将顶行的按钮与底行的按钮隔开。

在添加 a 标签之前，我可以让我的间距使用：

.profile-crop-buttons ul li:nth-child(2) {
    margin: 0 20px 0 20px;
}

然而，既然我已经添加了 a 标签，我还没有找到正确的语法来定位第二个孩子并给它左右边距。

所有提示表示赞赏！谢谢....

Answer 1

好吧，您不能将 a<a>作为 a 的直接子代，<ul>或者<ol>只有 a<li>是有效的，因此您想切换周围的顺序。

.profile-crop-buttons ul li:nth-child(2)不起作用，因为如上所述<li>is 不是 is 的<ul>子<a>级（第 nth-child 伪类只选择给定元素的子级而不是以后的后代），但是一旦您交换选择器周围的顺序，将按预期工作.

例子

Answer 2

您仍然必须为li元素而不是a标签留出边距。

在你的 CSS 中，改变

.profile-crop-buttons ul li a:nth-child(2) {
    margin: 0 20px 0 20px;
}

到

.profile-crop-buttons ul li:nth-child(2) {
    margin: 0 20px 0 20px;
}

那应该行得通。:)