The use of multi-type selectors_html/css_WEB-ITnose

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

Explanation

It can be seen from the above that a class value contains A list of words, the class becomes a multi-class selector. When defining attributes for a class (.warning) in CSS, if the class name exists in the multi-class word list (.urgent warning), the multi-class will also be defined. The writing method of .warning.urgent stipulates that the class value must contain both warning and urgent, so this definition has no effect on the second line (.warning).

In terms of compatibility, multi-category selectors cannot be processed correctly in IE7 and above.

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

Demand

Turn the circle into a red circle.

Explanation

If you change the class of circle to a new class (.circle), and then merge the same styles together (.red, .circle), Writing a separate .circle{border-radius:35px} may be a solution.

If you use a multi-class selector, adding a circle (.red circle) to the class value of circle, and then writing a separate .red.circle{border-radius:35px} can also solve the problem.

Comparing the two, in this case, using multi-class selectors is faster, eliminates unnecessary code redundancy, and is more conducive to expansion.

Reference:

Detailed explanation of CSS class selector