html - 覆盖一半页面的 CSS 通配符

Question

我遇到了这个问题，我尝试集成的主题有一个应用于整个站点的 CSS 通配符选择器。问题是它破坏了我以前的表单元素。

请参阅此图片以获取问题引用:坏的: http://i.imgur.com/mKKrbpD.png

这是我希望的样子:好的: http://i.imgur.com/sj4sBtN.png

为了获得漂亮的外观，我将“box-sizing”更改为 content-box。问题是通配符不断地应用于整个页面，所以它取代了它，我相信。

问题 #1:有人可以告诉我如何将此内容框仅应用于一页上的那两个框吗？

问题 #2:有点像第 1 点 - 但这必须仅适用于这两个框，因为标题和网站的整个其余部分都依赖于该框大小:border-box

这是一个活生生的例子:失败的有问题的部分，我认为...

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

请看一下实际示例，让我确切知道要更改什么以解决此问题。你可以看到我在那里尝试过的所有东西，但都没有奏效。如果你能帮助解决这个问题，你将得到我永恒的感激和我的利刃。

Answer 1

看看 .CollapsiblePanelTab 类，其中 Background img width 是 660px 并且您已经定义了 width:647px。确保宽度等于背景图像宽度。

这是CSS代码

.CollapsiblePanelTab {
    font: normal 21px Arial;
    text-transform:uppercase;
    background-color: #fff;
    border-bottom: solid 0px #CCC;
    height: 40px;
    margin: 10px 0 0;
    padding-left: 10px;
    padding-top: 13px;
    width: 660px; /*change it from 647 to 660px*/
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url("http://i.imgur.com/6wGRmmk.png");
    background-repeat: no-repeat;
    color: #000000;
}

Side Note: you are using -khtml-user-select: none; thats were used for very older version. To target the latest version of chrome and safari you must use -webkit prefix. Read More at MDN.