0

私は、WYSIWYG インライン エディターを介して編集可能なコンテンツを含むサイトを持っています。ユーザーは、書式設定のために同様のコード ブロックの周りに DIV を含む必要性を理解している可能性が非常に低く、次のような html になります。

<div class="borderBlock">Content...</div>
<div class="borderBlock">Content...</div>
<div>Other content</div>
<div class="borderBlock">Content...</div>

次の行に沿って現在の CSS を使用します。

.borderBlock {
margin: 8px 0;
border: 1px solid;
border-radius: 4px;
}

これにより、各 div に独自の境界線が与えられます。理想的には、最初の 2 つの div は境界線と背景色を共有します。

次のようなcssを使用できることを知っています。

:not(.borderBlock) + .borderBlock { }

クラス borderBlock の最初のブロックを選択する - ブロックの開始にフォーマットを適用し、同様に:

.borderBlock + :not(.borderBlock)

最初の none borderBlock 要素を選択します...しかし、別の div で明確に囲まれていないブロック内の最後の borderBlock 要素を選択する方法が見つかりません - 上記の html で :last-child または :last- を使用していますchild-of-type は、4 番目の div のみを選択し、2 番目の div を borderBlock の末尾としてスタイル設定しません。同様に、:first-child(-of-kind) は 2 番目の境界ブロックをスタイルしません。

JavaScript を使用しない CSS ソリューションはありますか? 標準の CSS 後読みスタイルではなく、CSS 先読み正規表現に相当するもの。

4

2 に答える 2

0

現在、JavaScript を使用したり、HTML を変更したりせずに、CSS セレクターでこれを行うことはできません。これは、先行する兄弟セレクターがないためです。

于 2012-10-12T14:02:37.097 に答える
0

このようなものはどうですか?:

http://jsfiddle.net/Hegxc/4/

:first-of-type と :last-of-type の使用

それはあなたが達成しようとしていることですか、それともあなたが探しているものを誤解していますか??

于 2012-10-12T08:32:35.120 に答える