CSS无序列表:为什么一种技术可以工作，而另一种技术不能工作？

Question

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

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

我正在尝试做一些自定义的东西(图像项目符号，边距，填充，等等)因为我给列表块分配了一个类，所以我想我可以像下面的前两行一样声明我的CSS。但这并不管用。当我像下面的两行那样做的时候，它工作得很好。我不明白有什么不同。

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

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


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

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

有谁能开导我吗？谢谢。

Answer 1

空格字符的意思是“现在让我们看看孩子们”。

因此，当你使用.help ul时，你说的是“用一个类的帮助抓取所有的东西”，然后是“抓取那些东西中的所有ul个孩子”。

然而，"ul.help“说的是”抓取所有既有类帮助又是ul的东西“。

Answer 2

“不工作”要求<ul>是help类的任何元素的子元素(直接或非直接

所以如果div是：

<div class="floatleft help">

它会起作用的。

Answer 3

.help ul的目标是使用'help‘类来帮助元素的后代：

示例：(不支持)

<div class="help">
   <ul>

ul.help使用help类将<ul>元素作为目标。

示例：(将在中运行)

<ul class="help">

.help li应该可以工作，因为它针对的是带有'help‘类的元素的<li>后代，这就是您所拥有的。

示例：(将在中运行)

<ul class="help>
  <li>

li.help应该不起作用，因为它将以带有“help”类的<li>元素为目标，而您的标记中没有这个类。

示例：(不支持)

<ul>
  <li class="help">

读一读后代选择器和级联(CSS中的“C”)是如何工作的。