2016-09-16 31 views
0

>は子供を直接にのみCSSを適用することを学びました。しかし私は私のケースでそれを使用することができません。直接子供にCSSを適用する

は、私は、外側スパンを太字にしたい

table[id="tbl"] div div > span { 
 
    font-weight: bold 
 
}
<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div> 
 
      <span> 
 
      outer span 
 
      <div> 
 
      <span> 
 
      inner span 
 
      </span> 
 
     </div> 
 
     </span> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

として、私はHTMLを持っているので、私は

table[id="tbl"] div div > span { 
    font-weight:bold 
} 

以下のようにCSSを書いたが、私の両方のスパンは太字で来ています。私はhtmlを変更することなく、何らかの理由でcssまたはjQueryを使用するだけで、これを行う必要があります。

答えて

3

インナーエレメントは継承されたスタイルルールを取得します。したがって、内部要素をオーバーライドする必要があります。また、属性セレクタの代わりにidセレクタを使用するだけです。

#tbl div div > span { 
    font-weight:bold; 
} 

#tbl div div > span span{ 
    font-weight:normal; 
} 
+0

1つのルールでは実行できません。 – Imad

+1

いいえ、そのようなことで継承を防ぐことはできません。 –

0

は、それはたぶんあなたの代わりにあなたのHTMLの再構築を検討すべきである完璧な

#tbl div div > span { 
 
    font-weight: bold; 
 
} 
 
#tbl div div > span span { 
 
    font-weight: normal !important; 
 
}
<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div> 
 
      <span> 
 
      outer span 
 
      <div> 
 
       <span> 
 
       inner span 
 
       </span> 
 
      </div> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

+0

他の回答のコピーではありませんか? – Imad

+0

変更を参照してください: font-weight:normal!important; –

+0

それは必要ありません – Imad

2

を作業してみてください?あなたはspansなどの中にdivを入れ子にしていますが、これは実際にはHTMLで許可されていません(詳細はWhat elements can a span tag contain in HTML5?を参照してください)。

ツリーの複雑さが減るほど、CSSを書くのが簡単になり、複雑なCSS表現の隅にペイントすることが少なくなります。

HTML要素にクラスを追加すると、スタイルを簡単にしたり、パフォーマンスを向上させることもできます(CSSパフォーマンスのヒントについては、https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSSを参照)。

+0

あなたは絶対に正しいです。しかし私が言及したように、私はできません。そして、その理由はhtmlはサードパーティの.netカスタムコントロールにカプセル化されており、そのソースにアクセスすることはできません。 – Imad