css - how to select the element in a tree structure? -

कोडपन:

html:

  & lt; div class = "आइटम" & gt; & Lt; a href = "" & gt; 首页 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 项目 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 招贤 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 联系 & lt; / a & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  

scss

<पूर्व> .item {background-color: skyblue; @ के लिए $ i से 1 से 4 {& amp;: nth-child (# {$ i}) {मार्जिन-बाएं: $ i * 10px; }}}

nth-child (3) वह नहीं चुनता है।

मैं nth-of-type का उपयोग करने की कोशिश करता हूं, लेकिन यह केवल nth- के प्रकार (1)।

क्या मुझे प्रत्येक .item में एक वर्ग जोड़ने की आवश्यकता है?

सही तरीके से इस स्थान का उपयोग करना है क्योंकि आप बच्चों के बारे में बात कर रहे हैं और भाई बहन नहीं

  div div div {}  

  Div div div {background: red}  

  & lt; div class = "item" & gt; & Lt; a href = "" & gt; 首页 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 项目 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 招贤 & lt; / a & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 联系 & lt; / a & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  
 
      Class = "snippet" data-lang = "js" डेटा-छुपिए = "झूठे"> 
 
  Div: nth-child (3) {पृष्ठभूमि: लाल}  
 
  & lt; div class = "आइटम "& gt; & Lt; a href = "" & gt; 首页 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 项目 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 招贤 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "आइटम" & gt; & Lt; a href = "" & gt; 联系 & lt; / a & gt; & Lt; / div & gt;