为什么我在.css文件中定义的元素的顺序会影响它在呈现时的显示效果？

（请参阅下面的更新）为什么我在.css文件中定义的元素的顺序会影响它在呈现时的显示效果？

我有两个文件：一个.css文件和一个index.html文档。这个想法是在屏幕上有一个按钮面板[用于触摸屏界面的可用性原型]，每个按钮在屏幕上分配一个特定位置（参见.css文件中的“margin-top”和“margin-left”标签。稍后我会加入onclick功能等。

现在，我只是想让它们在屏幕上正确显示。奇怪的是，.css部分中的第一个元素（即.aButton＃....）总是显示在浏览器中的位置（0,0）上，例如，此时按钮1将在（0,0）处，但所有其他按钮都处于如果我更改了css代码，并将button2部分向上移动到button1部分的上方，那么button1会呈现在正确的位置，但button2现在位于（0,0）处

非常感谢任何想法！

以下是有关部分：从index.html的

<div id="buttonPanel" class="aButton"> 
      <div id="button1" class="aButton"></div> 
      <div id="button2" class="aButton"></div>    
      <div id="button3" class="aButton"></div> 
      <div id="button4" class="aButton"></div> 
      <div id="button5" class="aButton"></div> 
</div>

从styles.css的：

.aButton #button1 
{ 
    margin-top: 262px; 
    margin-left: 110px; 
} 

.aButton #button2 
{ 
    margin-top: 24px; 
    margin-left: 347px; 
} 

.aButton #button3 
{ 
    margin-top: 32px; 
    margin-left: 114px; 
} 

.aButton #button4 
{ 
    margin-top: 524px; 
    margin-left: 104px; 
} 
.aButton #button5 
{ 
    margin-top: 392px; 
    margin-left: 106px; 
}

更新：已经更新Fr0zenFyr的的jsfiddle与整个HTML和CSS文件和得到一个相同的问题！ http://jsfiddle.net/b4NYd/ 我之前并没有将它们包含在内，这很愚蠢，因为我现在怀疑这与事先与#buttonx {}定义奇怪地交互的.aButton #buttonx {}定义有关。我可以设法通过合并两者来解决问题，但我真的很想理解为什么会出现这种问题，因为我希望以后在原型设计不同的布局时使用不同的类。

更新：全部排序！这是我的意见，啊！

来源

2013-03-22 Nathan

看起来对我很好：http://jsfiddle.net/Tdvev/ – Fr0zenFyr 2013-03-22 09:39:03

嗨Fr0zenFyr，谢谢你的jsfiddle - 我用我的完整代码更新了它，并且仍然遇到同样的问题，根据上述更新。 – Nathan 2013-03-23 11:28:38

@Nathan看看我更新的解决方案 – btevfik 2013-03-23 21:39:08

问题是您的意见。这不是如何评论写在CSS中。您需要使用/*表示法。

做到这一点

/* interface 1 */ 
/* need to change all of these according to what numbers I've got in my logbook.*/

来源

2013-03-22 09:26:47 btevfik

谢谢btevfik - 最近我一直在编写很多C++，所以我有时候会忘记明显的东西！ – Nathan 2013-03-23 21:42:40

是的，它有时也让我头痛。 html，css和js都有不同类型的评论 – btevfik 2013-03-23 21:43:32

你可以选择这个作为答案吗？ @Nathan – btevfik 2013-03-23 21:45:02

移动CSS的顺序，你的情况，应该不会影响到你的HTML元素的输出。你可以颠倒按钮的所有CSS类的顺序，这不应该影响任何东西。

你是否重写了任何其他的CSS？你是否已经将元素设置为内嵌块，或者btevfik是否触及过，是否使用了元素上的任何位置？你在css文件的后期重写你的按钮css吗？

在其他地方一定有其他问题导致你的按钮在屏幕上移动。

来源

2013-03-22 10:21:16 ahnkee

嗨，非常感谢您的回复 - 我已经用完整的css文档更新了一个jsfiddle，并且我怀疑有一些互动正在进行，但是我不能为我的生活弄清楚什么！ – Nathan 2013-03-23 11:29:32

为什么我在.css文件中定义的元素的顺序会影响它在呈现时的显示效果？

回答

相关问题