Question

我创建了小提琴以显示示例：我认为我正在设置父CSS，然后我应用了孩子的CSS。但它似乎被忽略了。

<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无效（使用validator），因此浏览器必须忽略它。

除零以外的长度必须包含单位（例如px或em）。

你应该无法说出这一点，因为display: none隐藏了一切。

Answer 3

您的班级展示位置设置在display: none上，基本上隐藏了整个容器。

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

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

这是我改变的：

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

更改了此内容，因为您的语法之前没有用。 “。”表示您正在寻址一个类，在这种情况下是带有子类父类的类显示框，并且您想要处理该类中的所有元素。

.displaybox .parent a
{
    color: black; 
}

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

.child a 
{
    color: white;
}

通过这些更改，您应该能够按照自己的意愿使用它。

嵌套CSS问题

3 个答案: