DIV首個，類型不DIV後有明確的工作：既

Question

我的問題是，在我的盒子第一個DIV應該是：第一的類型，但實際上它不是。

它發生第一

<div class="field_container"> 
    <div class="field_icon"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus eget lectus at convallis.</p> 
</div> 

圖標只是dissappears和整個潛水落下後插入

<div class="horizontal_line"></div> 

後，失去了它的首個類型的僞類。

我想它看起來就像這樣：IMAGE

我的網頁jsFiddle

所有箱常見的風格和樣式的第一個

.field_container 
    { 
    width: 216px; 
    margin-left: 28px; 
    display: inline-block; 
    float: left; 
    text-align: justify; 
    } 
.field_container .field_icon 
    { 
    height: 80px; 
    margin: 0 auto; 
    background-repeat: no-repeat; 
    } 
.field_container:first-of-type 
    { 
    margin-left: 0px; 
    } 
.field_container:first-of-type .field_icon 
    { 
    background-image: url('images/front_end.png'); 
    width: 83px; 
    } 

和風格水平線，這會導致問題

.horizontal_line 
    { 
    width: 100%; 
    margin: 25px 0px 25px 0px; 
    height: 1px; 
    clear: both; 
    background: #1C788B; 
    } 

Answer 1

first-of-type是用於第一類型的元件（p，div等）。你不能用class/id來使用它。它的工作原理，直到你加入horizonal_line DIV的原因是因爲你選擇那種（div）的第一個元素，所以添加horizontal_linediv使得它第一類型的元素的。

• CSS3 selector :first-of-type with class name?

在你的情況，你可以使用:nth-child代替：

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

.field_container div:first-of-type { 
    /* Will select the first div in .field_container */ 
} 
.field_container { 
    /* set no left margin */ 
} 
.field_container + .field_container { 
    /* set left margin on adjacent .field_container */ 
    margin-left: 28px; 
} 
.field_container:nth-child(2) .field_icon { 
    /* change the icon for each nth-child() */ 
}