html - 使用 CSS 使父 div 独立于父 div

Question

.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，因为它们可能有问题。

Answer 1

如果 CSS 在其他页面中不起作用，但主页意味着其他 CSS 片段正在覆盖它。尝试查找该页面的特定“id”或“class”以应用该 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;
    }    
}