Shulou(Shulou.com)06/01 Report--

This article mainly explains "CSS selector grouping method", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "CSS selector grouping method"!

Suppose you want both the h3 element and the paragraph to be gray. The easiest way to do this is to use the following statement:

h3, p {color:gray;}

A rule is defined by placing the h3 and p selectors to the left of the rule and separating them with commas. The style to its right (color:gray;) is applied to the elements referenced by both selectors. A comma tells the browser that there are two different selectors in the rule. Without this comma, the meaning of the rule would be completely different. See Descendant selector.

Any number of selectors can be grouped together without restriction.

For example, if you want many elements to appear gray, you can use rules like the following:

body, h3, p, table, th, td, pre, strong, em {color:gray;}

Tip: By grouping, authors can "compress" certain types of styles together, resulting in a simpler style sheet.

The following two sets of rules give the same result, but it is clear which is easier to write:

/* no grouping */h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}h5 {color:blue;}h6 {color:blue;} h7 {color:blue;}/* grouping */h2, h3, h4, h5, h6, h7 {color:blue;} At this point, I believe that everyone has a deeper understanding of the "CSS selector grouping method," may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.