css - 嵌套 CSS 问题

Question

我创建了小提琴来展示这个例子：我想我正在设置父 CSS，然后我应用孩子的 CSS。但它似乎被忽略了。

http://jsfiddle.net/8PWNw/2/

<div id="displaybox" class ="displaybox" style="display: none;">
    <div class = "parent" >
        <a href="reply.php?id=1">Parent 1</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=3">Child 1</a></span>
    <div class = "parent" >
        <a href="reply.php?id=2">Parent 2</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=4">Child 1</a></span>
</div>

请指教。我是 CSS 新手，所以我需要学习很多东西。

Answer 1

CSS 中的第 23 行：

/* this is actually saying element with both 'parent' and 'a' class */

    .displaybox .parent.a {
        color: black; 
    }

你可能的意思是：

/* this is actually saying all 'A' elements within element with 'parent' class */

    .displaybox .parent a {
        color: black; 
    }

这就是为什么您的“A”元素样式被忽略的原因。

Answer 2

padding: 0 10 isn't valid (use a validator) so browsers are required to ignore it.

Lengths, other than zero, must have units (such as px or em).

You shouldn't be able to tell this though, since display: none hides everything.

Answer 3

你的类显示框设置为 on display: none，它基本上隐藏了整个容器。

另一方面，您使用父子类，但您的孩子没有正确嵌套到他们的父母中。您需要将它们放在结束</div>标记之前，以便它们成为该容器的一部分。

我编辑了你的小提琴，现在应该可以工作了：http: //jsfiddle.net/8PWNw/

这是我改变的：

我删除了，display:none所以您的显示框再次显示。然后我改变了一些CSS：

更改了这一点，因为您的语法以前不起作用。这 ”。” 表示您正在处理一个类，在这种情况下是具有子类父级的类显示框，并且您想要处理该类中的所有 a 元素。

.displaybox .parent a
{
    color: black; 
}

我还添加了这个，所以你的链接显示为白色：

.child a 
{
    color: white;
}

通过这些更改，您应该能够让它像您想要的那样工作。