我不明白为什么内部 css 不会覆盖 google 创建的外部 css ... 这个外部 CSS 需要创建 Google 搜索栏(在我的例子中，仅用于创建结果页面-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
为什么？？？
谢谢!
编辑
结果页面由 google cse 创建并添加到我的 div 中。这是创建的代码:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
这是我的部分代码:
http://jsfiddle.net/2rg86vm6/1/
只是一部分所以不起作用;)
最佳答案
“为什么我的 CSS 没有被应用？”的答案几乎总是一些其他样式定义覆盖它。发生这种情况时，可能会令人沮丧，但不要绝望:您只需要知道两件事:
- 了解选择器强度和 CSS 特异性。
- 了解如何使用浏览器的开发者工具。
CSS 特异性和选择器强度
“选择器”是您的样式定义的一部分，用于定位(或“选择”)您的元素。它是 CSS 中大括号之前的代码:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
上面的片段代表一个 CSS 规则。上述规则的选择器是 .gs-results。
当您有两个匹配单个元素的规则并且样式冲突时，选择器强度很重要:
.a { color: blue; }
p { color: red; }<p class="a">Am I red or am I blue?</p>在上面的例子中，文本是蓝色的，因为类选择器比元素选择器具有更高的特异性。如果你想强制文本变红，你可以通过向它添加类来增强你的 p 选择器:
.a { color: blue; }
p.a { color: red; }<p class="a">Am I red or am I blue?</p>现在文本将是红色的，因为由元素和类组成的选择器比仅由类选择器组成的选择器具有更高的特异性。我们可以通过增加第一个选择器的特异性来再次使用蓝色。例如，指定一个祖先类:
.x .a { color: blue; }
p.a { color: red; }<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>进一步阅读:
- > CSS Standard: Calculating specificity该算法实际上非常简单。
- > CSS Specificity calculator
查找冲突的选择器
了解特殊性至关重要，但只有当您知道凌驾于您自己之上的样式规则时才会有所帮助。幸运的是，每个浏览器都带有出色的开发人员工具，可以轻而易举地发现应用规则。
在任何浏览器中，右键单击未按预期应用样式的元素，然后选择“检查元素”。这将打开开发人员工具，并打开 DOM 检查器并选中单击的元素。您可能必须手动选择所选元素的父元素或子元素。选择了正确的元素后，请查看正在应用的规则。您应该在列表中看到您的样式属性带有删除线:
如果您的特定元素应用了很多样式规则并且您找不到您关心的 CSS 属性，请尝试“计算”选项卡。此外，Chrome 允许您通过在显示“过滤...”的地方输入您感兴趣的属性来过滤显示的样式。 IE 让您过滤计算的选项卡。
现在您已经确定了覆盖您的样式的规则，您可以了解需要如何加强您的选择器。这应该不是什么困难的事情。我们将从其他规则的选择器中借用，让我们的文本变回红色:
.x .a { color: blue; }
.x p.a { color: red; }<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>为什么不直接使用 !important？
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
它会导致维护问题。如果这是您永远需要维护的代码，您以后会因为使用 !important 而痛恨自己。如果其他开发者需要维护它，他们会讨厌你。
关于javascript - 内部 CSS 不会覆盖外部 CSS(api google)...为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33736346/