嵌套CSS问题

我创建了一个小提示来展示示例：我想我设置了父级CSS，然后应用了孩子的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新手，所以我需要学习很多东西。

来源

2013-04-29 Andrew

这是你如何使小提琴：http://jsfiddle.net/8PWNw/2/;） – MatTheCat 2013-04-29 08:33:27

谢谢你;我不知道为什么，但它是说'没有阶级定义';我只是倾倒了整个页面 – Andrew 2013-04-29 08:35:58

第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' 的元素风格被忽略。

来源

2013-04-29 08:31:46 haim770

padding: 0 10无效（使用validator），因此浏览器需要忽略它。

长度不为零，必须有单位（如px或em）。

虽然你不应该这样说，因为display: none隐藏了一切。在你的CSS

来源

2013-04-29 08:29:27 Quentin

display;只是一个弹出窗口 - 请检查小提琴。我尝试以不同的颜色显示它，但不显示。 – Andrew 2013-04-29 08:31:55

*请检查小提琴* - 请阅读[我的网站上的东西不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link ），并在StackOverflow中包含一个* complete *问题，最好是一个用作简化测试用例的问题 - 除非“display：none”对问题有影响，不要包含它。 – Quentin 2013-04-29 08:35:14

您的课程displaybox设置为display: none，它基本上隐藏了整个容器。

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

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

这是我改变：

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

改变了这一点，因为你的语法之前没有工作。 “。”表示您正在寻址一个类，在这种情况下，类displaybox带有子类父级，并且您想要处理该类中的所有元素。

.displaybox .parent a 
{ 
    color: black; 
}

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

.child a 
{ 
    color: white; 
}

这些变化，你应该能够得到它的工作就像你想要的。

来源

2013-04-29 08:32:28 Terry

回答

相关问题