0

2 つのクラス識別子が使用されているのか、それらの両方がその間のコードに影響を与えたのか、それとも何か他のことが起こったのか疑問に思っていました。コード例:

.
.
.
<div class='class1'>
<div class='class2'>
<p>Example statement</p>
</div>
</div>

CSS:

.class1 {
           margin-right: 10px;
}

.class2 {
           margin-left: 10px;
}

これで、テキストに 10 ピクセルの左右の余白ができるようになりますか? どんな助けでも大歓迎です。

4

2 に答える 2

1

適用するスタイルのタイプに完全に依存します。これらの 2 つの div スタイルが class1 の font-family と class2 の font-size である場合、テキストはそれらを継承します。マージンは、それが指定されている実際の要素にのみ適用されるものの 1 つです (ただし、テキストはこれらの div 内に収まり、div には独自のマージン内にプッシュするテキストが含まれているため、基本的に左右のマージンは 10px になります。 )

CSS にも適用される特定の順序があるため、これら 2 つの div の色属性が異なる色に設定されているとします。テキストは、CSS で読み取られる最後の行であり、競合する class1 で記述されたものを上書きするため、class2 の色になります。

id かクラス セレクターか、インラインかどうかなど、これに影響するものはたくさんあります。具体性の順序を説明する記事は次のとおりです。http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

そして、これがあなたの実際の質問である継承に関する記事です。http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/

于 2012-10-15T03:49:50.950 に答える
1

いいえ、その要素に適用されたクラスのみがセレクターに使用されます。

ただし、HTML の例を使用して、class1 の子である class2 の要素のみが必要であることを指定できます。

.class1 > .class2 {
  margin-left: 10px;
}

または class1 の子孫である class2の要素:

.class1 .class2 {
  margin-left: 10px;
}

違いに関する情報は、http ://www.w3.org/TR/CSS2/selector.html#descendant-selectors にあります。

段落に左右の余白を持たせるには、次のようにします。

.class1 p {
  margin-right: 10px;
}

.class2 p {
  margin-left: 10px;
}

1 つ目は、class1 要素の子孫である段落には右マージンが必要であることを示し、2 つ目は、class2 要素の子孫である段落に左マージンを適用することを示しています。例の段落は両方の基準を満たしているため、両方のフォーマットが適用されます。

于 2012-10-15T03:08:32.107 に答える