Question

我有以下代码

<!DOCTYPE html>
<html>
<head>
    <title>jQuery goes to DOM-ville</title>
    <style>

        #change-me {
            position:absolute;
            top:500px;
            left:400px;
            font:24px arial;
        }

        #move_up #move_down #color #disappear {
            padding:5px;
        }

    </style>
    <script src="jquery-1.6.2.js"></script>
</head>
<body>
    <button id="move_up">Move Up</button>
    <button id="move_down">Move Down</button>
    <button id="color">Change Color</button>
    <button id="disappear">Disappear/Re-appear</button>

    <div id="change_me">Make me do stuff</div>
    <script>
        $(document).ready(function(){
            $("#move_up").click(function(){
                $("#change_me").animate({top:30}, 200);
            });//end move up
            $("#move_down").click(function(){
                $("#change_me").animate({top:500}, 2000);
            });//end move down
            $("#color").click(function(){
                $("#change_me").css("color","purple");
            });//end color
            $("#disappear").click(function(){
                $("#change_me").toggle("show");
            });//end disappear
        });//end doc ready
    </script>


</body>
</html>

当我在firefox中打开html（jquery文件在同一个文件夹中）时，firebug显示的元素的样式规则为nil，向上移动和向下移动按钮不起作用，但是当它们更改相应的css样式时，我更改了以下行

<div id="change_me">Make me do stuff</div>

到这个

<div id="change_me" style="position:absolute;">Make me do stuff</div>

一切似乎再次起作用，所以我的假设是head元素中的任何样式都不会应用于html元素，如果是这样，它们的意义是什么，如果它们被应用，那么为什么它们会被覆盖。

我的浏览器是MacOSX中的Firefox 11.0

Answer 1

change-me

vs

change_me

两者不一样。

HTML css问题与position属性

1 个答案: