0

DOM で互いに隣接している場合にのみ<h1>、ヘッダー タグ ( 、<h2>、<h3>など)のマージンを調整する方法を探しています。

だからここに私が持っているものがあります: http://jsfiddle.net/LtAHW/1/

基本的に、私が達成しようとしているのは、<h2>と の間の間隔を狭めることです<h3>が、それらが次々に現れる場合に限ります。したがって、上記の例では、最初のサブ セクションと最初のサブサブ セクションの間のスペースのみです。

ヘッダータグの任意の組み合わせで機能するソリューションを希望しますが、考えや提案をいただければ幸いです!

4

2 に答える 2

3

ちょっと、そこ、

隣接するセレクターを試しましたか？

h2 + h3 {
  margin-top: 10px;
}

最初の要素の直後に続く場合にのみ、2番目の要素を選択します。したがって、この場合、<h2>に続くすべての<h3>要素がターゲットになり、10pxのマージントップが与えられます。

ヘッダー要素の任意の組み合わせで機能するソリューションが必要な場合は、次のように、必要なときにいつでも使用できるいくつかのクラスを作成できます。

.h-first + .h-adjacent {
  margin-top: 10px;
}

世界で最高のクラス名ではありませんが、あなたはその考えを理解します。これらを見出し（またはそのことに関する任意の要素）の任意の組み合わせで使用し、この方法で物事をターゲットにすることができます。

隣接するセレクターはIE7+でサポートされているため、ほとんどのプロジェクトでカバーする必要があります。

うまくいけば、これはあなたが探していたものです！

編集：

これが更新された例です。

于 2012-10-19T17:24:39.500 に答える
0

私が正しく理解していれば、これはうまくいくはずです：

h2 {font-size: 16px;margin:0px;}
h3 {font-size: 14px;margin:0px;}

もちろん、必要なピクセル数を指定することもできますが、これは単なる例です。

簡単に言えば、ヘッダータグを選択し、同じヘッダータグで互いに続くサブセクションのそれぞれに名前を付けるだけで、ヘッダーにCSSで同じ機能をすべて与えることができます。

于 2012-10-19T16:45:49.670 に答える