Application of multi-class selector and multi-class selector

Application of multi-class selector and multi-class selector

Html

1 <p class="urgent warning">This is urgent warning.</p>2 <p>Well,<span class="warning">This is warning.</span>What else?</p>

Css

1 .warning{font-weight:bold;}2 .urgent{font-style:italic;}3 .warning.urgent{background:silver;}

Effect

Description

As we can see from the above, when a class value contains a word list, this class becomes a multi-class selector. When a class (. warning) is defined in css, if the class name exists in the multi-class word list (. urgent warning), multiple classes are also defined. The writing of. warning. urgent limits that there must be both warning and urgent in the class value. Therefore, this definition has no effect on the second line (. warning.

In terms of compatibility, multi-class selectors cannot be correctly processed in IE7 or later versions.

 

Html

1 <div class="red">flag</div>2 <div class="red">circle</div>

Css

1  .red{2       width:70px;3       height:70px;4       background:red;5       margin:10px;6       color:white;7       text-align:center;8       line-height:70px;9     }

Effect

Requirement

　Turns the circle into a red circle.

Description

If you change the circle class to a new class (. and then combine the same style (. red ,. and then write one. circle {border-radius: 35px} is a solution.

If a multi-class selector is used, a circle (. red circle) is added to the class value of the circle, and A. red. circle {border-radius: 35px} is written separately, the problem can also be solved.

Two-phase comparison: in this case, using multi-class selector is faster, saving unnecessary code redundancy and facilitating expansion.

 

References:

CSS selector details