選擇LESS類型的第一個元素

Question

爲什麼我不能選擇第一個標題元素header:nth-of-type(1)這是代碼，但jsfiddle不支持較少http://jsfiddle.net/0kzgj9fd/。 我需要它與少寫

我也試圖與:first-child和nth-child(1)但是，遺憾的是並沒有爲我工作...

Answer 1

您需要>選擇指定它的#wrapper

#wrapper { 
     background: white; 
     height: 100%; 
     width: 1720px; 
     margin: 0 auto; 
     border: 3px solid #707070; 

     >header:nth-of-type(1) { 
      margin: 0 auto; 
      width: 90%; 
      height: 200px; 
      background: red; 
      border: 3px solid #707070; 

      h1 { 

       color: #707070; 
      } 

     } 
    } 

證明的直接子：http://jsfiddle.net/T2Xe9/375/

Answer 2

因爲你總是落後其他標籤的元素，因此，它始終是第一個。嘗試在元素之後使用「>」作爲元素。看到。例如

#wrapper { 
    background: white; 
    height: 100%; 
    width: 1720px; 
    margin: 0 auto; 
    border: 3px solid #707070; 

    > header:nth-child(1) { 
     margin: 0 auto; 
     width: 90%; 
     height: 200px; 
     background: red; 
     border: 3px solid #707070; 

     h1 { 
      color: #707070; 
     } 
    } 
} 

好的是不要使用這麼多的嵌套。得到的CSS看起來很糟糕

html body #wrapper > header:child(1) h1 ....... 

更好的是

* {} 
html {} 
body {} 
#wrapper { 
    header:nth-of-type(1) {  
     h1 { 
     } 
    } 
}