Simple learning of CSS advanced syntax knowledge for creating web pages

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.

The code is as follows:	Copy code
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:

The code is as follows:	Copy code
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 exists ).
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 issues related to 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 rules we become "Be Kind to Netscape 4" to handle issues that legacy browsers cannot understand inheritance. Body {

The code is as follows:	Copy code
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 {

The code is as follows:	Copy code
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; }