CSS :first-child 選擇器 原

:first-child選擇器對於類的選擇中

<!DOCTYPE html>
<html>
<head>
<style>
.a:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p class = 'a'>這個段落是其父元素(body)的首個子元素。</p>

<h1>歡迎訪問我的主頁</h1>
<p class = 'a'>這個段落不是其父元素的首個子元素。</p>

<div>
<p class = 'a'>這個段落是其父元素(div)的首個子元素。</p>
<p class = 'a'>這個段落不是其父元素的首個子元素。</p>
</div>

<p><b>註釋:</b>對於 IE8 及更早版本的瀏覽器中的 :first-child,必須聲明 <!DOCTYPE>。</p>

</body>
</html>

但是一旦我們把div下第一個class a去除後

<!DOCTYPE html>
<html>
<head>
<style>
.a:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p class = 'a'>這個段落是其父元素(body)的首個子元素。</p>

<h1>歡迎訪問我的主頁</h1>
<p class = 'a'>這個段落不是其父元素的首個子元素。</p>

<div>
<p>這個段落是其父元素(div)的首個子元素。</p>
<p class = 'a'>這個段落不是其父元素的首個子元素。</p>
</div>

<p><b>註釋:</b>對於 IE8 及更早版本的瀏覽器中的 :first-child,必須聲明 <!DOCTYPE>。</p>

</body>
</html>

 

未變黃

first-child的要求。首元素,且符合的類

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章