3

">" を使用して親要素のすべての直接の子を選択しようとすると、border や all などの一部のプロパティでは機能しますが、color、font-weight などのフォント プロパティでは機能しません。

私のHTMLは

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

CASE1 CSS:

ul>li {
    color:#F00;
}

しかし、ここでは color:#F00 プロパティがすべての "li" 要素に適用されますが、"ul" の直接の "li" にのみ適用されるようにしたいと考えています。

ケース 2 CSS:

ul>li {
  border: solid 1px #000;
}

これは私にとってはうまく機能し、境界線は直接のliの子にのみ適用されます。

他のいくつかのクラスとすべてをオーバーライドすることで解決できることを私は知っています。しかし、なぜいくつかのcssプロパティが継承され、他のプロパティが継承されないのか知りたいです。

4

5 に答える 5

6

これは、特定の CSS プロパティのデフォルトの継承機能が原因で発生しています。これらの種類のプロパティの値は、デフォルトで子に送信されます。

W3C のこのドキュメントには、さまざまな CSS プロパティの継承の詳細なリストが記載されています。完全なプロパティ テーブル

于 2013-07-30T07:21:34.533 に答える
0

これを試して

デモ

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

CSS

ul > li {
    color:#F00;
}
ul > li > ol > li {
    color:#000;
}
于 2013-07-27T04:53:54.590 に答える
0

これを試して

ul > li ol li {color:black;}
于 2013-07-27T04:54:26.300 に答える
0

リスト要素は親から color プロパティを継承しているため、オーバーライドする必要があります。

以下のスタイルをあなたの前に追加することができます

li { 
    color: #000; 
}

ul>li { 
    color:#F00;
}

color: inherit 値をオーバーライドします。

于 2013-07-27T05:33:32.430 に答える
-2

ここで必要な答えが見つかると思います: http://www.w3schools.com/cssref/sel_firstchild.asp

これらの要素を選択できるはずです

ul:first-child {

// css

}

お役に立てれば

于 2013-07-27T04:54:18.747 に答える