CSS 无序列表 : Why Does One Technique Work But Another Doesn't Work?

Question

我在 HTML/CSS 中有一个基本的无序列表，如下所示...

<div class="floatleft">
    <ul class="help">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

我正在尝试做一些自定义的东西(图像元素符号、边距、填充等)因为我为列表 block 分配了一个类，所以我想我可以像下面的前两行一样制作我的 CSS 声明。但这是行不通的。当我在下面的两行中这样做时，它工作正常。我不明白有什么区别。

.help ul { declarations }   /* Doesn't work */

.help li { declarations }   /* Doesn't work */


ul.help { declarations }    /* Works! */

li.help { declarations }    /* Works! */

谁能教教我？谢谢。

Answer 1

“不起作用”需要 <ul>成为类 help 的任何元素的子元素(直接或非直接)

所以如果 div 是:

<div class="floatleft help">

它会起作用。