What's the difference between `.class1.class2` and `.class1 .class2` CSS rule?

What's the difference between `.class1.class2` and `.class1 .class2` CSS rule?

回答1

Spacing in between class specifiers means a ascendant -> descendant relationship.

The rule:

.test .heading { font-weight: bold; }

Would apply to the <p> element here:

<span class="test"><p class="heading">Something</p></span>

 

The lack of space means that the element must have both classes for the rule to apply.

The rule:

.heading.major { color: blue; }

Would apply to the <p> element here:

<p class="heading major">Major heading</p>

 

作者:Chuck Lu    GitHub