css - recaptcha 被 CSS 样式覆盖

Question

我正在尝试将 recaptcha 插入到我网站上的表单中。

我的 CSS 覆盖了 repaptcha 小部件的样式并使其看起来很糟糕..

我已经将它缩小到下面的 body div 样式，它改变了 recaptcha 的显示方式:

#body #content div {
    width :960px;
    background :transparent url("../images/bg-content-bottom.png");
    background-position :center bottom;
    background-repeat :no-repeat;
    padding-bottom :22px;
}
#body #content div div {
    width :860px;
    padding :10px 50px 20px 50px;
    background :transparent url("../images/bg-content.png");
    background-position :center center;
    background-repeat :repeat-y;
}

我怎样才能让这些停止改变 recaptcha 的显示方式？

非常感谢您的宝贵时间，詹姆斯

Answer 1

出于这个原因，像这样使用全局选择器不是好的做法，您的 div 选择器不够具体，因此验证码继承了样式。

有关编写更好的 CSS 的一些提示，请参阅此处:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

你应该更具体地使用你的样式选择器并将类放在你的子元素上，如下所示:

#body #content .container {
    width: 960px;
    background: transparent url("../images/bg-content-bottom.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 22px;
}

#body #content .container .pageContent {
    width: 860px;
    padding: 10px 50px 20px 50px;
    background: transparent url("../images/bg-content.png");
    background-position: center center;
    background-repeat: repeat-y;
}

或者，作为一种快速修复，您可以覆盖验证码的样式，尽管这确实不是一个理想的解决方案，因为 !important 声明随后将导致这些元素覆盖这些元素的任何其他样式.

#recaptcha_widget_div,
#recaptcha_widget_div div {
    width: auto !important;
    padding: 0 !important;
    background: none !important;
}

#recaptcha_widget_div a {
    font-size: 1.0em !important;
}