html - InternetExplorer9で子孫セレクターが機能しない

Question

このマークアップで：

    <div id="shopNav">
        <ul>
            <li class="active">
                <a href="#">test 1</a></li>

        </ul>
    </div>  
    <ul>
        <li class="active1"><a href="#">test</a></li>

    </ul>

これは機能しません

#shopnav li.active {
    border:1px solid red !important;    
}

しかし：

.active {border:1px solid red !important;}

動作します。

さまざまなドキュメントタイプでさまざまな動作が発生します：

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

最初のものは、IE8ではなくFFで強調表示され、次のように表示されます。

2番目のliのみにスタイルが与えられるという点で、動作は一貫しています。

私はこの種のセレクターを何年も使用しているように感じるので、これをまったく理解していません...なぜ最初のセレクターがIE9で機能しないのですか？そして、なぜ最初のセレクターがloose.dtdでも機能しないのですか？

このページで実際の動作を確認してください

Answer 1

id属性値では大文字と小文字が区別されます。がある場合id="shopNav"、CSSでは。#shopNavではなくを使用する必要があります#shopnav。

Answer 2

これを使って：

#shopnav ul li.active

またはこれ

#shopnav * li.active