0

我的问题是我框中的第一个 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;
    }
4

1 回答 1

0

first-of-type用于该元素的第一种类型（p,div等）。您不能将其与类/ID 一起使用。在添加 div 之前它起作用的原因horizonal_line是因为您选择了该类型的第一个元素 ( div)，因此添加horizontal_line div使其成为该元素的第一个类型。

在您的情况下，您可以: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() */
}
于 2013-06-25T22:00:54.143 回答