CSS advanced syntax

Selector Group

You can group the selector so that the Group selector can share the same declaration. Use commas to separate the selectors to be grouped. In the following example, all the title elements are grouped. All title elements are green.

H1, h2, h3, h4, h5, h6 {
Color: green;
}

Inheritance and Problems

Based on CSS, child elements inherit attributes from parent elements. But it does not always work in this way. Take a look at the following rule:

Body {
Font-family: Verdana, sans-serif;
}

According to the above rule, the site's body element uses the Verdana font (if the visitor's system has this font ).

Through CSS inheritance, sub-elements inherit the attributes of the highest level elements (in this example, the body) (these sub-elements such as p, td, ul, ol, ul, li, dl, dt, and dd ). No other rules are required. All the child elements of the body must display the Verdana font. And most modern browsers do.

However, in the bloody Age of the browser war, this situation may not necessarily happen. At that time, standard support was not a priority for enterprises. For example, Netscape 4 does not support inheritance. It not only ignores inheritance, but also ignores rules applied to body elements. There are still problems with IE/Windows and IE6, And the font style in the table will be ignored. What should we do?

Treat Netscape 4 with friendliness

Fortunately, you can use the redundancy rule we call "Be Kind to Netscape 4" to handle inheritance issues that legacy browsers cannot understand.

Body {
Font-family: Verdana, sans-serif;
}

P, td, ul, ol, li, dl, dt, dd {
Font-family: Verdana, sans-serif;
}

4.0 browsers cannot understand inheritance, but they can understand the group selector. Although this will waste some user bandwidth, if you need to support Netscape 4 Users, you have to do so.

Is Inheritance a curse?

If you do not want the "Verdana, sans-serif" font to be inherited by all sub-elements, what should you do? For example, you want the paragraph to have a font of Times. No problem. Create a special rule for p so that it will get rid of the rule of the parent element:

Body {
Font-family: Verdana, sans-serif;
}

Td, ul, ol, ul, li, dl, dt, dd {
Font-family: Verdana, sans-serif;
}

P {
Font-family: Times, "Times New Roman", serif;
}