1

最初の子アイテムと最後の子アイテムでスタイルを作成しようとしましたが、問題が発生しました。

初子を使うと、直前に強いアイテムがあるため、スタイルが当てはまりません。しかし、私の最後の子供は元気に働いています。

HTML:

<br />
<h2 class="title_block">Info <strong>1</strong>
    <span class="title_block_info">+2</span>
    <span class="title_block_info">+1</span>
</h2>​

CSS:

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 .title_block_info:first-child {
    border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-child {
    border-radius: 0 10px 10px 0;
}​

ここの例: http://jsfiddle.net/mYKRW/

なぜこれが起こったのか知っている人はいますか？

ありがとう、

4

2 に答える 2

3

title_block_infoそれは、あなたが目指していたクラスではなく、最初の子として「強い」タグを持っているからです。first-child実際に要素の最初の子である場合にのみ機能します。

これは機能します

<h2 class="title_block">
    <span class="title_block_info">+2</span>
    <span class="title_block_info">+1</span>
</h2>​

http://jsfiddle.net/mYKRW/1/

そこに強力なテキストが必要な場合は、これを試すことができます。2 つのスパン タグを別のスパン タグでラップした方法に注目してください。これにより、first-child と last-child を使用できるようになります

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 span .title_block_info:first-child {
    border-radius: 10px 0 0 10px;
}
h2 span .title_block_info:last-child {
    border-radius: 0 10px 10px 0;
}​

<h2 class="title_block">
    Info <strong>1</strong>
    <span>
      <span class="title_block_info">+2</span>
      <span class="title_block_info">+1</span>
    </span>
</h2>​

http://jsfiddle.net/mYKRW/6/

最後にfirst-of-type、必要に応じて HTML を正確に保持し、CSS を変更するだけの場合は、疑似クラスを使用できます。

h2 .title_block_info,
h2 strong {
    border: 1px solid #000;
}
h2 .title_block_info:first-of-type {
    border-radius: 10px 0 0 10px;
}
h2 .title_block_info:last-of-type {
    border-radius: 0 10px 10px 0;
}​

http://jsfiddle.net/mYKRW/9/

于 2012-06-23T14:50:17.560 に答える
2

:first-child疑似クラスは、セレクターから最初に一致する要素が親要素の要素でもある.title_block_info 場合、それを選択します。親要素の最初の子である別の要素があるため、これは機能しません。:first-child

あなたの場合、DOM 内strongの位置を占めている要素を削除するか、代わりに疑似クラス:first-childを使用することができます。:first-of-type

h2 .title_block_info:first-of-type {
    border-radius: 10px 0 0 10px;
}

JS フィドルのデモ。

HTML が同様に予測可能なままである場合 (.title_block_info要素は常に要素の後に続き:first-childます)、代わりに次のことができます。

h2 :first-child + .title_block_info {
    border-radius: 10px 0 0 10px;
}

JS フィドルのデモ。

参考文献:

于 2012-06-23T14:51:40.497 に答える