2

私が達成しようとしていることは本当に単純に聞こえますが、そうではありません。自分がやろうとしていることを達成できるかどうかさえわかりません。

わかりましたので、クラス名 .parent を持つ要素を取得しました。.parent は 2 つの div 子を取得しました。

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

最初の子をターゲットにするのは、次のように簡単です。

.parent > div {
  color: green;
}

「第二子」も影響を受けるので、そうではありません。

これは達成可能ですか？

補足: 「色」などの一部の CSS プロパティは、要素が直接のスタイルを取得していなくても、親から継承しています。これが問題の原因だと思います。それでも、カスケードしたくありません。

4

4 に答える 4

4

親要素の色は子要素に継承されます。最初に div の色を設定してから、直接の子の色を使用します。

.parent div{
  color: #000;
  }
.parent > div {
  color: green;
}
<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

于 2015-02-01T18:55:40.513 に答える
0

div > pを使用すると、親が div 要素であるすべての p 要素を選択することを意味します

ただし、プロパティを使用して 1 つの要素を設定すると、それをオーバーライドしなければ、すべての子がそのプロパティを継承します。例えば：

<div class="parent">
  <div>First child
    <div>Second child</div>
  </div>
</div>

color:greenあなたの場合、すべての div は継承によってプロパティを持ちます。2 番目の div のプロパティを変更する場合は、次の操作を行う必要がありますdiv.parent div div { color: red }。これは、親が「親」クラスの div であるすべての div を選択することを意味します。

これがスタイルシートの仕組みです。

于 2015-02-01T19:07:34.537 に答える
0

css はカスケードになっているため、要素に加えた変更は子に影響します。ただし、css クラスを 2 番目の子に配置して、css をオーバーライドすることはできます。

于 2015-02-01T18:55:17.400 に答える
0

いいえ、できません。

CSS color プロパティはデフォルトで継承されています。思い通りには
出来ない。

しかし、もっと重要な ことは、それはあるべき姿ではなく、あるISSUEべき姿であるということです。
覚えておいてください: CSS=> Cascade Style Sheet.

さて、あなたの質問について...これを「解決」するためのシンプルで簡単で正しい方法は...以前の回答で@Bhojendraネパールにすでに伝えたものです。

編集：

別のオプションは、フライング テキストをspan tag.. などでラップすることです。

.parent > div > span {
  color: green;
}
<div class="parent">
  <div>
    <span>First child</span>
    <div>
      <span>Second child</span>
    </div>
  </div>
</div>

于 2015-02-01T19:26:13.260 に答える