CSS范围和多个类

Question

I've ran into an issue where the parent scope is having an argument with its children.

What I was trying to accomplish is by setting the default color scheme for my page in the top level div (or body tag in my case). And have the ability to change the colors deeper down the DOM.

However when I use the following the inner DIV's are purple, and not red (see fiddle for demo).

Now if I swap the classes around in the file it works (the order in which they reside in the file), however this is not a solution in my case as its also possible for a 'red page' with purple panels and the same problem would arise.

Fiddle: http://jsfiddle.net/16t7g9cm/4/

HTML:

<div class="purple">
    <div class="red panel"> .red.panel </div>
    <div class="red">
       <div class="panel"> .red .panel </div>
    </div>
    <div class="panel"> .panel </div>
</div>

CSS:

.red .panel,
.panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

Can anyone explain/ point me to what causes this behavior and any possible solutions.

Regards.

Answer 1

They have the same specificity however purple comes after red in the CSS and therefore is overriding it.

You can simply switch them around to solve the issue.

http://jsfiddle.net/16t7g9cm/7/

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

.red .panel,
.panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

---

However if you can't reorder the classes you could make the red selectors would specific:

.purple .red .panel,
.purple .panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

Answer 2

This is a specificity issue the closer you are to the DOM the more specific you are so if you just replace the position of your css statements:

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

.red .panel,
.panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

it would work :) http://jsfiddle.net/16t7g9cm/6/

---

Another way if ordering is a bit hard is to make it more specific (its hacky but works):

.red.red .panel,
.panel.red.red {
    background-color: #cc3300;
    color: #ffffff;
}

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

as you see instead of .red I have .red.red which is the same thing but give you more specificity http://jsfiddle.net/16t7g9cm/8/

Answer 3

Add the following code and you code will work fine

 .red .panel, .panel.red { background-color: #cc3300 !important; color: #ffffff !important; } 

your parent styles are applied to the child element, hence current specified code will override the existing parent theme when conditions are met.