使用 CSS 使父 div 独立于父 div答案

【问题标题】：Make a parent div independent of parent divs with CSS使用 CSS 使父 div 独立于父 div
【发布时间】：2015-05-10 19:29:52
【问题描述】：

.cat_p{
    float:left; 
    margin-right:3px; 
    margin-bottom: 1px;}
.cat_p a {
    background: #00A1E0;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 0px;
    padding: 1px 7px;
    text-decoration: none;
    transition: all 0.3s ease 0s;
} 
.cat_p a:hover{
    background:  #666; 
    color:#fff;
}

这是我用来显示 Wordpress 文章帖子的类别和标签的代码。这在主页上工作得很好，而在另一个页面（single.php）上，代码不能正常工作，因为链接显示为蓝色，这使得无法区分类别 div 的背景和文本。我检查了上面的代码，但没有发现任何问题。我想知道是否有一种方法可以使类别 div 独立于上面的 div，因为它们可能有问题。

【问题讨论】：

您能创建一个通用示例来说明 JSFiddle 上的问题吗？我想我可能知道问题是什么，我只需要查看代码的上下文即可。
它是一个完整的 wordpress 主题 + wordpress。我可以在 JSFiddle 上这样做吗？
不，然后重新创建代码的通用示例。一个小的。
我尝试重新创建，但我不知道为什么它可以正常工作。这种情况只能在 wordpre 上完全解释.. 真的很抱歉，伙计

标签： html css

【解决方案1】：

如果 CSS 在其他页面中不起作用，但主页意味着其他部分 CSS 正在覆盖它。尝试查找该页面的特定“id”或“类”以应用该 CSS。通常我会去上body课，然后做：

.home,
.single-post {

    .cat_p{
        float:left; 
        margin-right:3px; 
        margin-bottom: 1px;}
    .cat_p a {
        background: #00A1E0;
        color: #FFFFFF;
        display: inline-block;
        margin-bottom: 2px;
        margin-left: 0px;
        padding: 1px 7px;
        text-decoration: none;
        transition: all 0.3s ease 0s;
    } 
    .cat_p a:hover{
        background:  #666; 
        color:#fff;
    }    
}

【讨论】：

我试过了，但它不起作用。还是同样的问题。实际上我尝试将<div class="categories">粘贴到不同的div中，发现它在.single_post之前的div上正确显示，但是当我尝试在single_post中添加类别类时，它仍然没有解决问题。
刚才我尝试通过添加#content_box a{color:#FFF;} 来编辑#content_box，这使得页面上的所有链接包括类别。但是，我只希望类别链接是白色的。我无法在 content_box 下添加cat_p。它不起作用。
我唯一的建议是使用浏览器检查器查看应用到元素的 CSS 并创建自己的 CSS，使用新属性复制相同的选择器。确保您的自定义 CSS 放在最后，并尝试我之前所说的：唯一的类或 ID 会有所帮助。祝你好运！
最后一个资源可能是添加一个 !important 来覆盖该选择器的所有链接 #content_box a{color:#FFF !important;}
谢谢伙计。无论如何，我得到了它的工作。添加了这样的类 - #content_box .tags_p 它刚刚工作。但是，你能帮我做一件事吗？