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

...表示元素中ul元素与expList类以及所有li元素“。

由于 ul有expList类，我想知道你是否真的想要：

.expList li { ... }

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

应用于一个UL的类将应用于页面上的* all *列表

1 个答案: