css - 自动覆盖默认的谷歌自定义搜索样式

Question

我正在为 Google 自定义搜索设置完全自定义的样式，以匹配我网站的其余部分。我下载了元素的完整 CSS ( here ) 并正在修改它。但是，其中一些结束时会被此处的默认自定义搜索样式覆盖:http://www.google.com/uds/api/search/1.0/56f70d816baa48bdfe9284ebc883ad41/default+en.css

有什么方法可以强制我的样式优先(无需在几乎每一行都放入 !important )或阻止搜索元素甚至使用 default+en.css 样式有没有？

Answer 1

您可以使用内联样式表或内联样式，可能您可能需要 !important 但它至少可以限制在您使用它的元素/主 block 中，这将允许多次搜索每个页面都有不同的 CSS 引擎。

另一种方法是，谷歌建议您使用版本 1 代码进行“高级设置”(!) - 在页面中，您从中获取代码是位于最底部的小链接页。它显示具有内联样式的代码(将 XXXX 和 YYY 替换为您的搜索引擎所需的 ID:

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;
var imageSearchOptions = {};
imageSearchOptions['layout'] = 'google.search.ImageSearch.LAYOUT_POPUP';
customSearchOptions['enableImageSearch'] = true;
customSearchOptions['overlayResults'] = true;
var customSearchControl =   new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYY', customSearchOptions);

  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
<style type='text/css'>
.gsc-control-cse {
font-family: Arial, sans-serif;
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-control-cse .gsc-table-result {
font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #333333;
background-color: #333333;
background-image: none;
filter: none;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #FF9900;
background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #E9E9E9;
background-color: #E9E9E9;
border-bottom-color: #FF9900
}
.gsc-tabsArea {
border-color: #FF9900;
}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
 color: #0000CC;
}
.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
color: #0000CC;
}
.gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
color: #0000CC;
 }
.gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
color: #0000CC;
 }
 .gsc-cursor-page {
color: #0000CC;
 }
 a.gsc-trailing-more-results:link {
 color: #0000CC;
 }
 .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
 color: #000000;
  }
 .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
 color: #008000;
 }
 .gs-webResult div.gs-visibleUrl-short {
 color: #008000;
 }
 .gs-webResult div.gs-visibleUrl-short  {
 display: none;
  }
 .gs-webResult div.gs-visibleUrl-long {
 display: block;
  }
 .gs-promotion div.gs-visibleUrl-short {
 display: none;
 }
 .gs-promotion div.gs-visibleUrl-long  {
 display: block;
 }
 .gsc-cursor-box {
 border-color: #FFFFFF;
 }
 .gsc-results .gsc-cursor-box .gsc-cursor-page {
 border-color: #E9E9E9;
 background-color: #FFFFFF;
 color: #0000CC;
 }
 .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
 border-color: #FF9900;
 background-color: #FFFFFF;
 color: #0000CC;
 }
 .gsc-webResult.gsc-result.gsc-promotion {
 border-color: #336699;
 background-color: #FFFFFF;
 }
 .gsc-completion-title {
 color: #0000CC;
 }
 .gsc-completion-snippet {
 color: #000000;
 }
 .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
 color: #0000CC;
 }
 .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
 color: #0000CC;
 }
 .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
 color: #0000CC;
 }
 .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
 color: #0000CC;
 }
 .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
 color: #000000;
 }
 .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
 color: #008000;
 }
 </style>

第二个选项

使用 #id 向 HTML 和样式添加一个 id，因为这应该优先于 google 在其样式中使用的类。 id 只需要是父元素而不是每个元素，css 可以应用于 id 后跟您想要的 class 或 class 是 id 的子元素，例如:

#my-cse1 .cse .gsc-input { } 
#my-cse1 > .gsc-input { }