CSS：nth-​​of-child和nth-of-type在我的标记结构中不起作用

Question

我已经尝试了几次nth-of-type和nth-of-type，并阅读了关于w3schools，css-tricks和mdn的文档，但是无法解决这个问题。 它在过去对我有用，但现在要么没有任何反应，要么所有跨度都适用于它们。

我只是尝试使用以下标记向第一个，第二个和第八个添加额外的底部填充（重复8次，并且所有lis都包含在父级ul中：

<li class="campaign-links__list-item">
  <a class="campaign-links__link " href="/feast-on-london-under-25" id="104014" data-analytics="Category|£25 and Under|offpage">
      <img class="campaign-links__image opt-new--campaign-image" src="//img.static-bookatable.com/images/batweb/bat/sub-themes/feast-on-london/feast-on-london-under-25/hero.jpg?width=451&amp;height=150&amp;quality=80&amp;mode=crop" alt="£25 and Under" width="94" height="94">
      <span class="campaign-links__text opt-new--campaign-text" style="padding-bottom: 29px;">£25 and Under</span>
  </a>
</li>

这是我尝试过的CSS：

.opt-new--campaign-text:nth-of-child(1), .opt-new--campaign-text:nth-of-child(2), .opt-new--campaign-text:nth-of-child(8) {
        padding-bottom: 29px;
    }

    .opt-new--campaign-text:nth-of-type(1), .opt-new--campaign-text:nth-of-type(2), .opt-new--campaign-text:nth-of-type(8)  {
        padding-bottom: 29px;
    }

非常感谢提前！

Answer 1

没有nth-of-child这样的东西，请使用nth-child。但是，您选择的是opt-new--campaign-text类，这是一个范围。此跨度是span类型的第一个子节点，a元素的第二个子节点。

您可能正在寻找的是：

.campaign-links__list-item:nth-child(1) .opt-new--campaign-text {
    padding-bottom: 29px;
}

等等。这将选择li元素的第一个（在本例中为ul）子元素，找到.opt-new--campaign-text后代，并为其添加填充。

Answer 2

如果我理解正确，你在这里重复class FirstViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UITextFieldDelegate,UIWebViewDelegate, UIPickerViewDataSource, UIPickerViewDelegate 块？ li.campaign-links__list-item查看父元素的子元素，但nth-child不会在其直接父元素中重复。

这样的事情应该有效：

.opt-new--campaign-text