0

2 つの順序付けられていないリストを含む単純なドキュメントを作成します。2 つのリストは、一方が他方の内部にネストされて いないという点で互いに分離されています。

ここで実際の例を参照してください: JSfiddle

クラスが最初のリストに適用されていますが、2 番目のリストには適用されていません。他のリストが同じクラスを共有していない場合でも、クラスがページ上のすべてのリストに適用されていることがわかりました。

マークアップ:

                <style>
                    #listContainer
                    {
                        margin-top:15px;
                    }

.                   .expList ul, li 
                    {
                        list-style: none;
                        margin:0;
                        padding:0;
                        cursor: pointer;
                    }
                    .expList li {
                        line-height:140%;
                        text-indent:0px;
                        background-position: 1px 8px;
                        padding-left: 20px;
                        background-repeat: no-repeat;
                    }                   
                    .expList { clear:both;}


                </style>

                    <p style='font-size:1.4em;'>First list</p>
                    <div id='listContainer'>
                        <ul class='expList'>
                            <li>A<ul><li>A1</li></ul></li>
                            <li>A</li>
                        </ul>
                        </div>

<hr>

                        <p style='font-size:1.4em;'>Second list.  </p>
                        <ul>
                            <li><b>Cats</b>
                                <ul>
                                        <li>Cheezburger</li>
                                        <li>Ceiling</li>
                                        <li>Grumpy</li>
                                </ul>
                            </li>
                            <li><b>Role Models</b>
                                <ul>
                                        <li>Bad Luck Brian</li>
                                        <li>Paranoid Parrot</li>
                                        <li>Socially Awkward Penguin</li>
                                </ul>
                            </li>
                        </ul>

完全に別の UL にクラスを適用すると、同じページの別のネストされていない UL に影響するのはなぜですか?

編集-この問題の非常に良い説明については、この質問に対する受け入れられた回答を参照してください。

4

1 に答える 1

1

すべての li要素にスタイルを適用しています:

.expList ul, li

ul...「 class を持つ要素内の要素expList、およびすべての要素」を意味しliます。

class を持つのは であるため、実際に必要かどうか疑問に思っています:ulexpList

.expList li { ... }

liのすべての要素を意味しul.expListます。推測ですが、詳しい情報がないとなんとも言えません。

于 2013-02-01T23:57:50.527 に答える