css - 应用于一个 UL 的类将应用于页面上的*所有*列表

Question

有两个无序列表的简单文档。这两个列表相互独立，因为一个列表不嵌套在另一个列表中。

请参阅此处的工作示例:JSfiddle

一个类被应用到第一个列表，而不是第二个列表。我发现该类正在应用于页面上的所有列表，即使其他列表不共享同一类。

标记:

                <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？

编辑 - 查看对 this question 的已接受答案对于这个问题的很好的解释。

Answer 1

您正在将样式应用于所有 li 元素:

.expList ul, li

...表示“具有 expList 类的元素中的 ul 元素，以及所有 li 元素”。

因为它是具有 expList 类的 ul，我想知道您是否真的想要:

.expList li { ... }

表示 ul.expList 中的所有 li 元素。虽然是猜测，但没有更多信息很难说。