0

这非常奇怪，但请查看以下 html 和 css。只要我将 table 和 tableWrapper 作为具有为它们定义的 id 的元素保留，这就可以正常工作

如果我尝试使它们成为类（将 # 更改为 . 在 css 中）并将 id 更改为 html 元素上的类，那么圆类不再包含在 tableWrapper 中（它们超出了它的边界）。我真的大吃一惊，因为我从没想过某个 id 或 class 是否会对布局产生影响，但我在 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 回答