1

<p>私がやりたいのは、次のコードで複数のターゲットを設定することです。

h1+p
{
    margin-left: 20px;
}

h2+p
{
    margin-left: 27px;
}

h3+p
{
    margin-left: 35px;
}

以下は私が達成しようとしている効果です：

の効果

問題は、新しい<p>要素があると、テキストのブロックが明らかに通常の位置に戻り、余白がなく、見出しと一致しなくなることです。

（そのようです）

問題

この問題を攻撃するより良い方法はありますか？（またはその問題で機能するもの）

4

2 に答える 2

4

これは、隣接する兄弟セレクターの代わりに一般的な兄弟セレクターを使用することである程度達成できます。~+

h1~p
{
    margin-left: 20px;
}

h2~p
{
    margin-left: 27px;
}

h3~p
{
    margin-left: 35px;
}

ただし、特に、、、および要素がすべて同じ親を共有している場合は、これに注意h1してくださいh2。スタイルのカスケード方法と兄弟セレクターの動作により、コンテナーの最後の見出しがまたはである場合でも、最後の要素に続くすべての要素に35ピクセルのマージンが与えられます。h3pph3h1h2

たとえば、このマークダウンがある場合：

＃見出し1

段落

段落

##見出し2

段落

段落

###見出し3

段落

段落

##見出し2

段落

段落

ルールはカスケード順序の最後であり、すべての要素が同じ親を共有しているため、最後の4つの段落には35ピクセルのマージンがあります。これには最後の段落に続く2つが含まれます。これはあなたが達成しようとしている効果かもしれないし、そうでないかもしれません（私はそうではないと思います）。h2h3~p

これに対する純粋なCSSの回避策はありません。恐れ入ります。レンダリングされたマークアップをJavaScriptで後処理して、見出しに基づいて段落にクラスなどを追加する必要があります。

于 2012-05-03T08:51:19.020 に答える
1

これはあなたが達成しようとしていることですか？http://jsfiddle.net/chrismackie/5DgNH/

于 2012-05-03T09:04:04.370 に答える