0

これは非常に奇妙ですが、次の html と css を確認してください。table と tableWrapper を ID が定義された要素として残している限り、これは問題なく機能します。

それらをクラスにしようとすると (css で # を . に変更)、html 要素の id を class に変更すると、サークル クラスは tableWrapper 内に含まれなくなります (境界を越えて拡張されます)。何かがIDであるかクラスであるかがレイアウトに影響を与える可能性があるとは思っていなかったので、私は本当に驚いていますが、これはIE10とGoogle Chrome v25の両方で発生しています。

この特定の問題の解決策を探しているわけではありません。私は理解を求めており、うまくいけば、それが発生する理由と、これに関して私が期待できることを説明するw3cドキュメントへのリンクを探しています。

                <html>
                <head>
                <style>
                    .circle{
                        background-color:red;
                        border-radius:50%;
                        height:90%;
                        width:100%;
                        colore:white;
                        top:7%;
                        position:absolute;

                        left:0px;

                    }
                    .innerCircle{
                        border-radius:50%;
                    background-color:white;
                        position:absolute;
                        top:12%;
                        z-index:2;
                        left:5%;
                        height:80%;
                        width:90%;

                    }
                    #navBar{
                    background-color:black;
                    color:white;
                    width:100%;
                    height:7%;
                    }
                    #table{
                        height:550px;
                        border:solid 1px black                                                                                                              ;
                        width:500px;
                        position:absolute;
                        top:0px;
                    }
                    #tableWrapper{
                        height:90%;
                        width:100%;
                    }

                </style>
                </head>

                <body>
                    <div id="table">


                        <div id="navBar">
                            Room info
                        </div>
                        <div id="tableWrapper">

                            <div class="circle">

                            </div>
                            <div class="innerCircle">

                            </div>
                        </div>

                    </div>
                    <input type="text" id="xval" style="float:right" />

                    <input type="text" id="yval" style="float:right" />
                </body>
            </html>
4

2 に答える 2

2

特異性と、ID がクラスとは異なる方法で処理されるためではないかと思います。つまり、ID はクラスよりも特異性が高くなります。コンテナーがクラスで、要素が ID の場合、ID を持つ要素は、クラス レベルで設定できるすべての設定をオーバーライドします。

詳細情報へのリンクは 次のとおりです http://css-tricks.com/specifics-on-css-specificity/

于 2013-03-09T21:30:56.077 に答える
0

IDをクラスに変更すると、セレクターの特異性に影響します。http：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/を参照してください。簡単に言えば、IDはページ上で一意であるため、クラスよりも具体的なセレクターです。要素が複数のルールで選択できる場合は、最も具体的なものが適用されます。そうでない場合は、すべてが等しい具体性を持っている場合、「カスケード順序」（基本的にルールが宣言される順序）が重要になります。スタイルシートのさらに下に表示されるルールは、同じ特異性で上にあるルールをオーバーライドします。

http://specificity.keegan.st/には優れた特異性計算機があり、特定の状況でどのセレクターが勝つかを理解するのに役立ちます。

同じ名前のクラスとの名前の衝突もあるかもしれません。

何が起こっているのかを実際に確認するには、選択したブラウザで開発者ツールを使用することを強くお勧めします。個人的にはChrome開発者ツールをお勧めしますが、Firefoxには、ネイティブと人気のFirebug拡張機能の両方でかなり良いセットがあります。要素を右クリックして[要素の検査]を選択すると、（ほとんどのブラウザーで）一致するすべてのセレクター、適用されたルール、およびオーバーライドされたルールを表示できます。

于 2013-03-09T21:34:21.497 に答える