CSS advanced syntax

[Introduction] Grouping of selectors You can group selectors so that grouped selectors can share the same statement. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green. h1,h2,h3,h4,h5

Group of selectors

You can group selectors so that the grouped selectors are The same statement can be shared. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green.

h1,h2,h3,h4,h5,h6 {
color: green;
}

Inheritance and its problems

According to CSS, child elements inherit properties from their parent elements. But it doesn't always work this way. Take a look at the following rule:

body {
font-family: Verdana, sans-serif;
}

According to the above rule, the body element of the site will use Verdana font (if the font is present on the visitor's system).

Through CSS inheritance, child elements will inherit the attributes owned by the highest-level element (in this case, body) (these child elements such as p, td, ul, ol, ul, li, dl, dt, and dd). No additional rules are needed, all child elements of the body should display the Verdana font, as well as the child elements of the child element. And in most modern browsers, this is indeed the case.

But in the bloody days of the browser wars, this might not have happened, when support for standards was not a priority for enterprises. For example, Netscape 4 does not support inheritance and not only ignores inheritance, but also ignores rules that apply to the body element. There is still a related issue in IE/Windows up to IE6 where font styles in tables will be ignored. What should we do?

Be Kind to Netscape 4

Luckily, you can do this by using a redundancy we call "Be Kind to Netscape 4" Rules to deal with legacy browsers not being able to understand inheritance.

body {
font-family: Verdana, sans-serif;
}

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

4.0 Browsers don’t understand inheritance, but they do understand group selectors. Although this will waste some users' bandwidth, it must be done if you need to support Netscape 4 users.

Is inheritance a curse?

What if you don't want the "Verdana, sans-serif" font to be inherited by all child elements? Let's say you want the font of your paragraph to be Times. no problem. Create a special rule for p so that it gets rid of the parent element's rule:

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;
}

The above is the detailed content of CSS advanced syntax. For more information, please follow other related articles on the PHP Chinese website!