Html 当两个类分配给一个 div 时，类会否决

class overrule when two classes assigned to one div

提问by Daniel Ramirez-Escudero

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.

我正在创建一个<div>标签，我想在其中应用两个类作为<div>缩略图库的标签。一类为其位置，另一类为其风格。这样我就可以应用这种风格，我得到了一些奇怪的结果，这让我想到了一个问题。

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

可以将两个类分配给一个<div>标签吗？如果是这样，哪一个优先于另一个或哪一个具有优先权？

回答by jfriend00

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

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

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

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

然后，此 div 将匹配三个不同类选择器的任何样式规则：.rule1,.rule2和.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 specificitydetermines which rule takes precedence.

CSS 规则应用于页面中与其选择器匹配的对象，按照它们在样式表中遇到的顺序，如果两个规则之间存在冲突（多个规则试图设置相同的属性），则CSS 特异性决定哪一个规则优先。

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.

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

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.

然后，由于两个规则都匹配 div 并且具有完全相同的 CSS 特异性，那么第二个规则稍后出现，因此它具有优先级并且背景将为红色。

---

---

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

如果一个规则具有更高的 CSS 特异性（div.rule1分数高于.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.

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

回答by Erez Sason

Actually, the class that defined last in the css - is applied on your div.

实际上，在 css 中最后定义的类 - 应用于您的 div。

check it out:

一探究竟：

red last in css

css中的红色最后

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

vs

对比

blue last in css

css中的蓝色最后

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

回答by sandeep

If you asking about they have same property then as per the CSS rule it's take the last statement.

如果您询问它们具有相同的属性，那么根据 CSS 规则，它采用最后一条语句。

<div class="red green"></div>

CSS

CSS

.red{
 color:red;
}
.green{
 color:green;
}

As per the above example it's take the last statement as per css tree which is .green.

根据上面的示例，它根据.greencss 树采用最后一条语句。

回答by Henrik Ammer

The class that is defined last in the CSS have priority, if nothing else applies.

如果没有其他应用，则在 CSS 中最后定义的类具有优先权。

Read up on CSS priorityto see how it works.

阅读 CSS 优先级以了解它是如何工作的。

回答by Kyle

Many classes can be assigned to an element, you just separate them with a space

许多类可以分配给一个元素，你只需用空格分隔它们

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Because of the cascade in CSS, the overwriting rules closest the to bottomof the document will be applied to the element.

由于 CSS 中的级联，最靠近文档底部的覆盖规则将应用于元素。

So if you have

所以如果你有

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

The red color will be used, but not the background color as it was not overwritten.

将使用红色，但不会使用背景色，因为它没有被覆盖。

You must also take into account CSS specificity, if you have a more specific selector, this one will be used:

你还必须考虑 CSS 的特殊性，如果你有一个更具体的选择器，将使用这个：

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

The second selector here will be used as it is more specific.

这里将使用第二个选择器，因为它更具体。

You can take a look at it all here.

您可以在此处查看所有内容。