html - 如何设置 google cse 样式

Question

我从谷歌获得了这段代码，但我无法设置它的样式，我在我网站的 css 中添加了新规则，但它不听它并用谷歌的默认设置覆盖它，我能用它做什么让它看起来像我想要的那样，而不是谷歌如何计划它？

那是我的 css 被忽略了

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

这就是 google cse 代码

<script>
  (function() {
    var cx = '013795634587489910289:wcfxuut_dc8';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Answer 1

尝试添加您的样式表

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent;
  border: none;
  width: 280px;
}

样式是 google 的 css。

例如你的 html 可能看起来像这样:

<link rel="stylesheet" href="https://cloud.google.com/compute/style.css" type="text/css">
<link rel="stylesheet" href="style/page.css" type="text/css">

其中 https://cloud.google.com/compute/ 包含 google gcs 的样式，而 style/page.css 包含 。 cse .gsc-control-cse, .gsc-control-cse { ... } 样式。

作为最后的尝试，仅在必须时使用:

(感谢@MrUpsidown 指出这个方法是 inherently bad )
在每个 CSS 规则后添加 !important:

.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent !important;
  border: none !important;
  width: 280px !important;
}

---

!important css 声明用于覆盖应用于同一元素的另一种样式。 更多信息在这里:http://www.webcredible.com/blog-reports/web-dev/css-important.shtml