在一个元素和特殊性中使用多个类 [英] Using multiple classes in one element and specificity

问题描述

只是想知道何时在一个元素上使用多个类，例如 class =foo bar，这些类的设置如下：

  .foo {
 margin-right：10px; 
} 
 
 
 .bar {
 margin-right：0px; 
} 
  

哪一类有特异性？边距是10px还是0px？

解决方案

它的工作原理基于CSS中的优先级。

pre> .foo {background：red; }
.bar {background：blue; }


class ='foo bar'

pre> .bar {background：blue; }
.foo {background：red; }


class ='foo bar' 。

工作示例

Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

Which class will have specificity? Will the margin be 10px or 0px?

解决方案

It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.

CASE 1

.foo  { background : red; }
.bar  { background : blue; }

class = 'foo bar' would be blue in this instance.

CASE 2

.bar  { background : blue; }
.foo  { background : red; } 

class = 'foo bar' would be red in this instance.

Working Example

这篇关于在一个元素和特殊性中使用多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！