我的问题是我框中的第一个 DIV 应该是 :first-of-type,但实际上不是。
插入后发生
<div class="horizontal_line"></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>
图标消失了,整个潜水都掉了下来,失去了它的第一个伪类。
我希望它看起来像这样: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;
}