Question

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

Answer 1

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

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() */
}

在div之后，DIV First-Of-Type不起作用：两者

1 个答案: