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

“不起作用”要求<ul>成为班级help的任何元素的孩子（直接或非直接）

所以如果div是：

<div class="floatleft help">

它将工作。

Answer 2

.help ul使用'help'类定位<ul>元素的后代：

示例：（无效）

<div class="help">
   <ul>

ul.help使用帮助类定位<ul>元素。

示例：（将起作用）

<ul class="help">

.help li应该可以正常工作，因为它定位了{help}类的元素的<li>后代，这就是你所拥有的。

示例：（将起作用）

<ul class="help>
  <li>

li.help不应该有效，因为它会使用“帮助”类定位<li>个元素，而标记中没有这个元素。

示例：（无效）

<ul>
  <li class="help">

阅读后代选择器和级联（CSS中的“C”）如何工作。

Answer 3

问题在于，选择器.help ul适用于ul标记，该标记是具有类help的元素的子标记。相应的标记看起来像这样，其中div标记可以是任何元素，而不一定是ul标记的直接父标记。

<div class="help">
    <ul>
        ....  
    </ul>
</div>

在您的情况下，您有一个ul标记，其中包含help类，这正是ul.help选择的内容。

有关CSS选择器的全面参考，请参阅W3C page。

Answer 4

空间角色几乎意味着“现在让我们看看孩子们”。

所以，当你有.help ul时，你会说“通过一类帮助抓住所有东西”，然后“抓住那些东西中的所有儿童”。

但是，“ul.help”说“抓住所有可以获得帮助的东西并且是一个ul”。

Answer 5

扩展马特的答案：

.help ul表示“在包含'help'”的元素中包含（但深度嵌套）的ul元素

ul.help表示“带有'帮助'类的ul元素”

供参考

ul .help表示“具有类'帮助'的元素包含（但深度嵌套）在具有ul元素的元素中”

Answer 6

在最后一行中，li.help不应该工作，因为你用一组“帮助”来解决所有li的问题。

“工作原理”可能还取决于您尝试将样式应用于哪个元素。您可能需要检查一些HTML参考指南，了解要应用列表设置的元素。通常，您的整体项目符号设置是在ul上完成的，但在某些浏览器中，某些间距也会应用于li。

CSS无序列表：为什么一种技术有效但另一种技术不起作用？

6 个答案: