当两个类被分配给一个div时，类将被拒绝 [英] class overrule when two classes assigned to one div

问题描述

我创建了一个< div> 标记，其中我想为< div> 标记，它将是缩略图库。一个类的位置和其他类的风格。这样我可以应用的风格，我有一些奇怪的结果，这给我一个问题。

可以将两个类分配给< div> 标记？

解决方案

多个类可以分配给一个div。只需在类名中用如下空格分隔它们：

 < div class =rule1 rule2 rule3> Content< / div> 
  

此div将匹配三种不同类选择器的任何样式规则：。 rule1 ， .rule2 和 .rule3 。

CSS规则应用于页面中按照样式表中遇到的顺序匹配其选择器的对象，并且如果两个规则之间存在冲突一个规则尝试设置相同的属性），然后 CSS特性< a>确定哪个规则优先。

如果冲突规则的CSS特性是相同的，那么较晚的规则（稍后在样式表或后面的样式表中定义的规则）将优先。对象本身的类名的顺序无关紧要。

所以，如果你有这样的样式：

这样的风格规则在样式表中是重要的。

  .rule1 {
 background-color：green; 
} 
 
 .rule2 {
 background-color：red; 
} 
  

然后，由于两个规则都匹配div并且具有完全相同的CSS特性，

---

如果一个规则有更高的优先级CSS特异性（ div.rule1 得分高于 .rule2 ）：

  div.rule1 {
 background-color：green; 
} 
 
 .rule2 {
 background-color：red; 
} 
  

然后，它将优先，此处的背景颜色将为绿色。 / p>

---

如果两个规则不冲突：

  .rule1 {
 background-color：green; 
} 
 
 .rule2 {
 margin-top：50px; 
} 
  

然后，将应用这两个规则。

I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.

Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?

解决方案

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

这篇关于当两个类被分配给一个div时，类将被拒绝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！