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を選択しているためです。追加すると、その要素の最初のタイプになります。divhorizontal_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 に答える