CSS : nth-of-type 및 nth-of-type이 내 마크 업 구조에서 작동하지 않습니다.

Question

몇 번째 nth-of-type과 nth-of-type을 여러 번 시도했으며 w3schools, css-tricks 및 mdn 그러나 이것을 이해할 수는 없습니다. 그것은 과거에는 저에게 효과적 이었지만 이제는 아무 일도 일어나지 않거나 모든 기간에 CSS 규칙이 적용됩니다.

난 그냥 제 1, 제 2, 제이 다음과 같은 마크 업 (반복와 여덟째 8 배에 별도의 바닥 패딩을 추가하기 위해 노력하고있어

모두는 부모 UL 안에 LIS :

<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

같은 것은 없습니다. 그러나 범위 인 opt-new--campaign-text 클래스를 선택합니다. 이 범위는 유형 span의 첫 번째 하위 요소이며 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은 바로 부모 요소 내에서 반복되지 않습니다. 이 같은

뭔가 작업을해야합니다 : n 번째의 아이, nth-child를 사용할 때

는

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