html - How can I manage which class' background color to take action, if I have an element with a class list?

Question

I have two classes with different background colors style. However, if I have an element that has both classes (as a class list), how can I choose which color to get from the two classes?

I know, for example, if I have this in Style:

.intro { 
  background-color: yellow;
}

and this in Body:

<div class="intro">
  <p>HELLO</p>
</div>

Then I would get HELLO with yellow background. HOWEVER, what if I have this in Style:

.intro { 
  background-color: yellow;
}
.concl { 
  background-color: yellow;
}

and this in Body:

<div class="intro  concl"> // a classList with two classes
  <p>HELLO</p>
</div>

How can I manage which class background color to take action?

标签： htmlcss

Answer 1

你不能在 html 中设置哪个类在另一个 for 元素之前。但你可以在 css 中设置：

（代码笔：链接）

/* if an element had two classes */
.intro.concl{
   background-color: yellow; 
}
/* you can also customize it for each class or id */
#elem1.intro.concl{
   background-color: red; 
}

每个班级也可以通过 ，使其领先于其他班级!important;，例如：

.intro { 
  background-color: yellow !important;
}