Question

这非常奇怪，但请查看以下html和css。只要我将table和tableWrapper作为为其定义的id的元素

，这就可以正常工作

如果我尝试使它们成为类（在css中更改＃到。）并在html元素上将id更改为class，那么圆形类不再包含在tableWrapper中（它们超出了它的边界）。我真的大吃一惊，因为我从来没有想过，某些人是不是一个id或类可能会对布局产生影响，但我看到这种情况发生在IE10和谷歌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>

Answer 1

我想知道是否可能是因为特异性以及如何将ID与Classes区别对待。即ID具有比类更高的特异性。如果您的容器是一个类，并且您的元素是一个ID，那么带有ID的元素将覆盖可能在类级别设置的任何设置。

这是一些更多信息的链接 http://css-tricks.com/specifics-on-css-specificity/

Answer 2

将ID更改为类会影响选择器的特异性，请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。简单地说，ID是一个比类更具体的选择器，因为它在页面上是唯一的。如果可以使用多个规则选择元素，则将应用最具体的规则，否则如果所有规则都具有相同的特异性，则“级联顺序”（基本上是声明规则的顺序）很重要。样式表中进一步显示的规则会以更高的特异性覆盖规则。

http://specificity.keegan.st/有一个很棒的特异性计算器，它可以帮助你了解在任何特定情况下哪些选择器会胜出。

也可能存在与同名类的命名冲突。

要真正了解发生了什么，我强烈建议您在自己选择的浏览器中使用开发者工具 - 我个人推荐使用Chrome开发者工具，但Firefox有一套相当不错的功能，无论是原生还是使用热门产品Firebug扩展。右键单击元素并选择“检查元素”（在大多数浏览器中）将允许您查看所有匹配的选择器，已应用的规则以及已被覆盖的规则。

css和类之间的视觉差异

2 个答案: