使用 CSS 定位特定的小部件标题答案

【问题标题】：Targeting a specific widget title with CSS使用 CSS 定位特定的小部件标题
【发布时间】：2013-04-27 19:47:49
【问题描述】：

在我的 wordpress 支持的网站上，我有小部件标题框，如果你看一下，你会看到我在网站右侧的左侧边栏中有一个标题为“英国狮子”的标题框。

这是一个类别小部件，只会显示该类别的帖子。我想将标题框从绿色更改为红色，以匹配“英国狮子”的风格。

然后我将添加更多这些小部件，但它们将从不同的类别中提取，并且还将具有自己的颜色样式。你会在首页的主要内容上看到我的意思 aviva 是黄色的，超级橄榄球是蓝色的等等，但我也想要这个小部件。

如何使用 css 定位特定的小部件框来更改背景。我尝试过使用 firebug，但它似乎更改了所有小部件标题框，而不是我想要的那个特定的标题框。

希望有人可以提供帮助，我很有意义。

谢谢

【问题讨论】：

【解决方案1】：

您可以通过其 ID #feacpost_featuredcategorypostswidget-2 访问它。

所以你可以添加类似的东西

#feacpost_featuredcategorypostswidget-2 h3 {
    background-color: #b22023;
}

到您的 CSS。

【讨论】：

你也可以通过尝试#wellthemes_recent_tags_widget-2 a[href="http://rugbyclubhouse.net/tag/lions-2/"]{background-color: #b22023;} 来为标签按钮做类似的事情
因为您是 stackoverflow 的新手...要接受有帮助的答案，您可以选择旁边的勾号 =)

【解决方案2】：

这是可能的。让我们以这里的“British Lions”标签为例。

#feacpost_featuredcategorypostswidget-2 h3 {
    background-color: #ff0000 !important;
}

将此 CSS 放入您自己的样式表中。

我希望这会有所帮助。

【讨论】：