nth-of-typeの仕組みについての説明が必要

Question

私はこのコードを持っているので、このタイプの最初の兄弟にとって、nth-of-typeセレクタが2でなくてはならない理由を理解できません。

はここjsfiddleコードです：https://jsfiddle.net/xj5hvn16/

誰かが、私にこれを説明していただけますか？

.flowbox .utm_registrars_code:nth-of-type(2) { 
 
    background-color: red; 
 
}

<div class="flowbox freebox"> 
 
    <div class="pholdcard18"></div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 1 
 
    </div> 
 
    </div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 2 
 
    </div> 
 
    </div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 3 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

nth-of-type特定のタイプの最初の要素から始まり、あなたのケースでdivはなく、選択されたクラスの最初の要素

からである：n番目の型（）疑似classは、ドキュメント ツリー内の同じ拡張要素名を持つ+ b 兄弟を持つ要素を表し、nのゼロまたは正の整数値の場合は の要素を持ちます。

さらに詳しい情報：

• https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-of-type
• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Answer 2

nth-of-typenth-of-classを意味するものではありません！

タイプdivの最初の要素は、したがって、あなたのContent 1要素が第二及び強調表示され

<div class="pholdcard18"></div> 

あります。