CSS多类属性覆盖 [英] CSS multiple classes property override

问题描述

如果我有这样定义的样式类:

.myclass{
    //bunch of other stuff
    float:left;
}

我定义了另一个这样的类:

.myclass-right{
    float:right;
}

我以这种方式定义了一个div:

<div class="myclass myclass-right"></div>

该div将继承myclass的所有内容，但将float属性覆盖为float:对吗?这就是我期望发生的事情.还有一种想知道是否对跨浏览器有影响(好的浏览器与IE 7或更高版本，f *** IE6).

解决方案

只要选择器具有相同的特异性(在这种情况下，它们确实如此)，并且.myclass-right样式块在.myclass之后定义，是的.

编辑以展开:类在html元素中出现的顺序无效，唯一重要的是选择器的特异性以及选择器在样式表中出现的顺序.

If I have a style class defined as such:

.myclass{
    //bunch of other stuff
    float:left;
}

and I define another class like this:

.myclass-right{
    float:right;
}

and I define a div this way:

<div class="myclass myclass-right"></div>

Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).

解决方案

As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.

Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.

这篇关于CSS多类属性覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！