开发人员工具显示我无法找到的 CSS 以进行编辑答案

【问题标题】：Developer tool shows CSS I can't locate in order to edit开发人员工具显示我无法找到的 CSS 以进行编辑
【发布时间】：2013-06-24 07:46:40
【问题描述】：

这可能是一个很容易解决的新手问题。

Here is my site

我正在尝试更改菜单包装的背景颜色：INFO 字样周围的框。

使用 Chromes 开发工具，我发现背景颜色来自 CSS 第 43 行

这是我的问题

body #menu_wrap, #topmenu ul li ul li{ background:#302F2F url("http://blergh.us/wp-content/themes/theron-lite/images/transblack.png") repeat!important;}

但是，当我尝试编辑时，CSS 规则不存在。相反，我发现这个垃圾：

#menu_wrap{width:1000px; float:left; background:#7d928f url(images/menu_wrap.png) repeat;}
#topmenu{text-align:center;}
.menu-header{margin:auto; padding:0; display:block;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{list-style-type:none; display:inline-block; position:relative; margin-top:0px;padding:25px 15px;}
#topmenu li a{ font-size:18px; color:#fff;}
#topmenu ul > li:hover{  background:#7d928f url(images/transblack.png) repeat;}
#menu-icon{display:none;}

我的 CSS 隐藏在哪里？

【问题讨论】：

标签： css wordpress colors developer-tools

【解决方案1】：

问题出在Theme Functions (functions.php)。

body #menu_wrap, #topmenu ul li ul li{ background:#302f2f url("<?php echo get_template_directory_uri(); ?>/images/transblack.png") repeat!important;}

在此处更改#302f2f 与您的颜色。

【讨论】：

【解决方案2】：

以上所有答案都是正确的，但它们并不能真正回答您的问题。可以在客户端 HTML 上找到 CSS，这是正确的。但是如何编辑呢？

我假设您正在运行一个 Wordpress 网站（无法访问您发布的链接，但从您发布的 CSS 中可以清楚地看出）。 Wordpress 允许插件在服务器端运行。这些插件可以动态地将 CSS 添加到任何给定页面。你的qquestion中的CSS很可能是插件注入的。

要确定哪个插件正在生成该 CSS，您可以尝试一次禁用每个插件。当你看到 CSS 不再被导入时，你已经找到了罪魁祸首。

【讨论】：

【解决方案3】：

看起来您正在设置覆盖背景的列表项的背景

body #menu_wrap, #topmenu ul li ul li{ background:#302F2F url("http://blergh.us/wp-content/themes/theron-lite/images/transblack.png") repeat!important;}

改成这个

#topmenu ul li ul li{ background:#302F2F url("http://blergh.us/wp-content/themes/theron-lite/images/transblack.png") repeat!important;}

【讨论】：

这是有道理的。我的问题是我在样式表的任何地方都找不到该 CSS 规则来更改它。它藏起来了。在我的 CSS 中搜索“302F2F”没有任何结果。

【解决方案4】：

如果您使用 google chrom 右键单击检查元素。在 CSS 面板 Matched CSS rules 中，它显示 blergh.us 这是您的主页。

这意味着

body #menu_wrap, #topmenu ul li ul li{ background:#302F2F url("http://blergh.us/wp-content/themes/theron-lite/images/transblack.png") repeat!important;}

在页面上。

只需右键单击您的家。看看上面的最后一个样式标签 </head>

你会找到你的风格

<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ffffff; background-image:   url('http://blergh.us/wp-content/uploads/2013/06/DAMASK.jpg'); background-repeat: repeat; background-position: top center; background-attachment: scroll; }

【讨论】：