0

有两个无序列表的简单文档。这两个列表彼此分开，因为一个没有嵌套在另一个内部。

请参阅此处的工作示例：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？

编辑- 请参阅此问题的已接受答案以获得对此问题的很好解释。

4

1 回答 1

1

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

.expList ul, li

...表示“ul具有 class 的元素中的元素expList和所有li元素”。

既然它有ulclass ，expList我想知道你是否真的想要：

.expList li { ... }

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

于 2013-02-01T23:57:50.527 回答