如何优先考虑CSS类？

问题描述：

我引用一些引导样式表，并有一个为如何优先考虑CSS类？

.badge { 
    display: inline-block; 
    min-width: 10px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 1; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    background-color: #777; 
    border-radius: 10px; 
} 
.alert-success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
}

我想用这种风格，但定义由于我的HTML class="alert-success badge"，它是由其他定义覆盖

.panel-default>.panel-heading .badge { 
    color: #f5f5f5; 
    background-color: #333; 
}

现在后者的定义更具体，它优先于我期望的CSS。我该如何解决这个问题？

编辑： 有更多的其他类有这个问题。有没有我不需要逐一指定的解决方案？

答

使用CSS Specificity，你应该用自己的覆盖更具体的选择器。

.panel-default > .panel-heading .badge.alert-success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
}

编辑：其他选项包括：

删除/改变违规的CSS文件（引导困难的，但可行和维护头痛，如果你决定更新bootstrap.css）
- 更新/删除冒犯选择
- 添加:not()选择器，以避免某些情形
改变你的HTML结构，使它确实如此不是遵循有问题的CSS选择器。
- 更改类名和/或使用新的
- 插入/删除额外嵌套的div /元素（避免>直接子选择器）

值得庆幸的是，如果你有很多的课程更新，smart regex replace是你最好的朋友，但这是另一个话题。

对不起，我不清楚，这不是我想要做的，因为有更多的其他类有这个问题。我不想一个接一个地做。 – YSJ

有什么可以从其他类中提取的共同点吗？ –

它们对“color”和“background-color”都有不同的值。我想也许它更像是我可以忽略那个特定的徽章CSS？ – YSJ

答

似乎没有简单而优雅的解决方案，所以我只是做了简单的解决方法。我将徽章css复制出来，并给它一个新名称来代替使用引导徽章类。伤心。

.panel-default > .panel-heading .alert-badge { 
    display: inline-block; 
    min-width: 10px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 1; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    border-radius: 10px; 
}

答

ID选择器具有比CLASS更高的特异性优先级。如果你能能够增加ID，它将超驰.panel-default>.panel-heading .badge

.panel-default>.panel-heading .badge { 
    color: #f5f5f5; 
    background-color: #333; 
} 

#custom.badge{ 
    background-color: #f00; 
} 


<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <div class="badge">class target</div> 
    <div id="custom" class="anything badge">id target</div> 
    </div> 
</div>

下面是特异性mozilla的文件建立， https://developer.mozilla.org/en/docs/Web/CSS/Specificity

谢谢！

答

你知道我不确定你的解决方案是否注册为css。我必须这样做才能获得结果。我认为CSS只是语法上的明智之举。

.panel-default > .panel-heading, .panel-default > .badge{ 
    color: #f5f5f5; 
    background-color: #333; 
}

我只注意到这一点，因为我这次测试了我的代码。

如何优先考虑CSS类？

相关推荐