爲什麼不能用僞選擇器來定位這個類？

嗨，我努力瞄準這個班，我不知道爲什麼。似乎第一個div會干擾第二個div上的僞選擇器。爲什麼不能用僞選擇器來定位這個類？

HTML

<div class="home-work"> 
<div class="home-work-header"><h3><span>test</span></h3></div> 
<div class="home-work-container"><p>test</p></div> 
<div class="home-work-container"></div> 
<div class="home-work-container"></div> 
</div>

CSS

.home-work-container { 
width:100%; 
margin:10px 20px; 
background-color:grey; 
height:250px; 
&:first-of-type {padding:144px;} 
}

https://jsfiddle.net/L0uoz531/

在此先感謝

來源

2016-04-26 Mo Martin

'：'是不是有效的CSS。那是一種CSS預處理器嗎？ – j08691

請參閱http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name – Mike

是的，他正在使用SCSS。現在將編輯標籤。 – Frits

這是因爲&:first-of-type

該屬性實際上是引用的第一個兄弟DIV（帶有id="home-work-header"）

檢查出這個小提琴：https://jsfiddle.net/L0uoz531/1/

如果你瞄準第二個孩子，你會得到什麼你瞄準。這裏此鏈接可能是複雜的選擇最好的參考，他們是如何工作的：http://learn.shayhowe.com/advanced-html-css/complex-selectors/

.home-work-container { 
 
\t width:100%; 
 
\t margin:10px 20px; 
 
\t background-color:grey; 
 
\t height:250px; 
 
&:nth-of-type(2) { 
 
    padding:144px; 
 
    } 
 
}

<div class="home-work"> 
 
    <div class="home-work-header"> 
 
    <h3><span>test</span></h3></div> 
 
    <div class="home-work-container"> 
 
    <p>test</p> 
 
    </div> 
 
    <div class="home-work-container"></div> 
 
    <div class="home-work-container"></div> 
 
</div>

來源

2016-04-26 14:37:10 Frits

謝謝你做到了。儘管如此，我不能說我完全理解，因爲這是'家庭工作集裝箱'的第一個例子。 –

不客氣！如果有幫助，請記得將答案標記爲已接受！乾杯。 – Frits

爲什麼不能用僞選擇器來定位這個類？

回答

相關問題