CSS：nth-​​of-child和nth-of-type不工作在我的標記結構中

Question

我已經嘗試過幾次nth-of-child和n-type，並閱讀w3schools，css-tricks和但不能解決這個問題。 它在過去爲我工作，但現在或者沒有任何反應，或者所有跨度都可以應用到他們的css規則。

我只是想額外的底部填充添加到第一，第二和第八本下面的標記（重複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

有沒有這樣的東西作爲第n-的孩子，使用nth-child。但是，您正在選擇opt-new--campaign-text類，這是一個範圍。此跨度是類型跨度中的第一個子元素，也是a元素的第二個子元素。

什麼，你可能尋找的是：

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

等。這將選擇ul元素的第一個（在此例中爲li）孩子，找到.opt-new--campaign-text後代，並向其添加填充。

Answer 2

如果我正確認識你，你在這裏重複li.campaign-links__list-item塊nth-child長相！？在父元素的子元素中，但.opt-new--campaign-text不在其直接父元素中重複。

像這樣的東西應該工作：

.campaign-links__list-item:nth-child(1) .opt-new--campaign-text, .campaign-links__list-item:nth-child(2) .opt-new--campaign-text, etc...