CSSのdivの[ID | = "サブペイン"]その親>のdiv CSSセレクタを知っているときにエラー

Question

がIEで認識できない、私は再コードこの例から、私のCSSスタイル：これに

div#bodyMain div#paneLeft>div{/*styles here*/} 

：

div#bodyMain div#paneLeft div[id|="subPane"]{/*styles here*/} 

はここに私のHTMLスニペットです：

<div id="bodyMain"> 
     <div id="paneLeft"> 
      <div id="subPaneCategory"> 
       <p id="subPaneTitle">Shop Item Categories</p> 
       <!--other html here --> 
</div></div</div> 

問題はここに私の/ スタイルある/ありません今はMozillaで働いています。 element [attribute | = "value"]の使い方について知っておく必要があることはありますか？ありがとう

Answer 1

パイプ（|=）は、ハイフネーションされた値を照合するためのものです。 IEはおそらくパイプを無視し、Mozillaではパイプを尊重しているのでスタイルはもはや動かなくなりますが、それはマークアップ（ハイフンなし）と一致しません。

^=演算子は値の "StartsWith"と一致し、$ = "EndsWith"と一致します。私はこれらのどちらもIEによって認識されていないと確信しています。あなたは、クロスブラウザのサポートが必要な場合には、に固執することが一般的に最も安全です：

• ele
#id
• .class
• 子孫（スペース）
• そしてa
ため :hoverのようないくつかの他の限定されたもの

これはかなりです。ありがとうIE :)

Answer 2

なぜCSSクラスを使用しないのですか？

<div id="bodyMain"> 
    <div id="paneLeft"> 
     <div id="subPaneCategory" class="subpane"> 
      <p id="subPaneTitle" class="subpane">...</p. 
     </div> 
    </div> 
</div> 

そして、あなたのCSSを簡単かつクロスブラウザです：

#paneLeft div.subpane { 
    /* whatever */ 
} 

はまた、（あなたが特異性を高めるためにそれを必要としない限り）2つのIDを使用してCSSセレクタを持つにはポイントがないことに注意してください。つまり、div#bodyMain div#paneLeftはちょうど#paneLeftと書き直すことができます。