Question

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

有什么方法可以强制我的样式优先（不必在几乎每一行都放入!important）或者阻止搜索元素甚至使用默认的+ en.css样式？< / p>

Answer 1

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

另一种方法是谷歌建议您使用版本1 代码进行高级设置＆＃39;（！） - 在页面中，您可以获得代码，这是微小链接在页面的最底部。它显示此代码具有内联样式（将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只需要是父级而不是每个元素，然后只要id跟随您想要的class，或者只要class是其中的子级，css就可以应用id，例如：

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

自动覆盖默认的Google自定义搜索样式

1 个答案: