Simple Learning CSS Advanced grammar knowledge of web making technology

Source: Internet
Author: User
Tags header inheritance
css| Advanced | web | syntax

Grouping of selectors

You can group selectors so that the grouped selectors can share the same statement. Separate the selectors that need to be grouped with commas. In the following example, we grouped all the header elements. All the header elements are green.

h1,h2,h3,h4,h5,h6{Color:green}

Inheritance and its problems

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

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

According to the above rule, the BODY element of the site will use the Verdana font (if it exists in the visitor's system).

With CSS inheritance, the child elements inherit the attributes (such as P, TD, UL, OL, UL, Li, DL, DT, and DD) of the top-level elements (in this case, the body). No additional rules are required, all child elements of the body should display the Verdana font, and the child elements of the child elements are the same. And in most modern browsers, it does.

But in the bloody years of the browser war, this was not necessarily the case, when support for standards was not a priority for companies. For example, Netscape 4 does not support inheritance, it ignores inheritance and ignores rules applied to the BODY element. Ie/windows until IE6 has a related problem, the font style is ignored in the table. What should we do?

Friendly to Netscape 4

Fortunately, you can handle the problem of legacy browsers that do not understand inheritance by using our redundancy rules of being Kind to Netscape 4.

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. This can be a waste of some user bandwidth, but if you need to support Netscape 4 users, you have to.

Is inheritance a curse?

What if you don't want the "Verdana, Sans-serif" font to be inherited by all the child elements? For example, you want the paragraph font to be the times. No problem. Create a special rule for P so that it gets rid of the rules 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;     }


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.