1

私は次のコードを持っています

<!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のFirefox11.0です

4

1 に答える 1

4 
change-me

vs

change_me

2つは同じではありません。

于 2012-04-12T14:30:43.600 に答える