前端css样式覆盖
.detail .grid .active 的样式会覆盖 .detail .grid .bgorange .active
在CSS中，当多个选择器应用于同一元素时，会根据一定的优先级规则决定哪个样式会被应用。
CSS选择器的优先级规则如下：
-
内联样式（在HTML元素的
style属性中定义的样式）总是具有最高的优先级。 -
然后是ID选择器（例如
#myId）。 -
类选择器（例如
.myClass）和属性选择器（例如[type="text"]）。 -
伪类（例如
:hover）和伪元素（例如::before）。 -
通配选择器（
*）和标签选择器（例如div）。
在你提供的例子中，.detail .grid .active和.detail .grid .bgorange .active的优先级相同，因为它们都包含类选择器和属性选择器。如果这两个选择器都应用于同一个元素，并且该元素同时具有class="bgorange active"，那么最后定义的选择器将覆盖之前的定义。
如果你想要.detail .grid .bgorange .active的样式优先于.detail .grid .active，你可以在.bgorange后面添加更多的选择器，提高其优先级，例如：
.detail .grid .bgorange .active {
/* 样式 */
}
/* 这条规则将优先于上面的规则，因为它更具体 */
.detail .grid .active.bgorange {
/* 样式 */
}
在这个例子中，.detail .grid .active.bgorange比.detail .grid .bgorange .active更具体，因为它同时使用了类选择器和伪类选择器，而且.bgorange类直接应用于具有active类的元素，不通过子选择器或后代选择器进行间接选择。因此，它具有更高的优先级。