我有一个嵌套的 html 结构，在 div 中包含 div(在行中创建行)。我需要允许用户设置 div(行)css(添加 css 类)。 当 css 特异性相同时，我正在努力寻找解决方案。 例如，我想创建四层嵌套行，第一行带有红色边框，第二行和第三行带有蓝色边框，第四行带有红色边框。使用下面的标记和 css 第四行有蓝色边框而不是红色，因为 css 特异性相同并且应用了最后一个类。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.main {
width: 300px;
height: 100px;
}
.main .row {
width: 100%;
height: 100%;
border: 1px solid #808080;
}
.main .row [class*="span"] {
display: block;
min-height: 30px;
margin-top: 5px;
margin-bottom: 5px;
}
.main .red .bp1 {
border: 2px solid red;
margin-left: 10px;
margin-right: 10px;
}
.main .blue .bp1 {
border: 2px solid blue;
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="row red">
<div class="span bp1">
<div class="row blue">
<div class="span bp1">
<div class="row blue">
<div class="span bp1">
<div class="row red">
<div class="span bp1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row blue">
<div class="span bp1">
<div class="row red">
<div class="span bp1">
<div class="row blue">
<div class="span bp1">
<div class="row red">
<div class="span bp1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
在第二个嵌套的 div 中，我想要蓝色/红色/蓝色/红色行，不幸的是所有都是蓝色的，因为那是最后一个样式类。
有没有办法解决这个问题？
最佳答案
将 !important 添加到您要覆盖的任何属性值的末尾。例如，宽度:100% !important;
关于css - 在嵌套元素中覆盖 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17075767/