0

我为 chrome 编写了一个扩展程序，为站点“reddit”添加了某些功能。它使用以下 jQuery 为网站上的每个帖子添加一个额外的按钮：

...    
$(this).append('<li><span class="grab_button">grab</span></li>');
...

班级grab_button是新的。它在 reddit 样式表中不存在，但扩展样式表 chrome 中应该加载的 CSS 没有被应用：

html body span.grab_button {
        color: #888 !important;
        font-weight: bold !important;
        padding: 0 1px !important;
}

我添加了!important规则以确保覆盖任何适用的 CSS。我的定义非常具体（我可能会更具体，但我不应该这样做）。为什么它不被应用？如果我使用 webkit 开发人员工具检查添加的按钮，它会列出所有适用于它的样式，即使是被覆盖的样式，但它不会显示我的自定义样式。

这是清单的相关部分：

"content_scripts": [
        {
            "matches": ["http://www.reddit.com/*"],
            "js": ["jquery-2.0.3.min.js", "script.js"],
        "css": ["style.css"]
        }
],

"web_accessible_resources": [
        "style.css",
    "script.js",
    "jquery-2.0.3.min.js"
]

谁能解释为什么这不起作用？

4

1 回答 1

0

您的选择器不正确。您的标记创建了一个类名为 grab_button 的跨度，但您的 CSS 代码匹配一个包含该类名的后代的跨度。您的 CSS 选择器代码应为：

html body span.grab_button {

或者更好的是，只是：

.grab_button {

不需要它之前的所有东西，只会让它变慢。

于 2013-07-19T14:21:06.237 回答