CSS style cascade Application

Today, I made a special page and applied it to the particularity and Inheritance of CSS. In fact, stacked styles are implemented through inheritance and particularity.

The logic structure of the Code is as follows:

div.content>(div.bgb.con1+div.bgb.con2)

Explanation:

1. The design drawing is a special annual product session, which consists of two parts: Self-picked product and express product. Con1 and con2 are used in the code. There is a background in both self-picked and express product blocks.

2. There is a special template on the company topic page. The background of the product in the topic is white.

3. A gradient background with a fixed height is displayed in the design diagram. However, the number of items stored in the Self-lift and express delivery containers is uncertain.

The solution is as follows:

1. Place the entire gradient background in the Self-raising product. The gradient to a certain distance, the solid color is used below.

2. Continue to use solid color for express delivery products.

Because many of the topic pages are public Styles, you cannot delete those styles. You can only add styles in a private style table and overwrite them through cascade. The Code is as follows:

Original Style:

.bgb{ background:#fff;}

Newly Added style:

.content{ background:url(img/ny_goods_con.jpg) repeat-y; }.con1{ background: url(img/ny_goods_con1.jpg) no-repeat;}.con2{ background:url(img/ny_goods_con.jpg) repeat-y; }

In this way:

1. con1. con2 will overwrite the. BGB style (according to the Appearance Order)

2.because ny_goods_con1.jpg has a height, the background color of. Content is displayed when the saved item exceeds the background height. (Note: This does not inherit the background color of the father, but because the Default background color is transparent, because the background color of the father is not displayed in the excess. Note: the background color of. BGB is not displayed in the excess part because. BGB has been overwritten by. Con .)

3. Set the background for. con2. If you think you want him to pass his father's color directly, you are wrong, because if you don't set the background for. con2,. BGB will take effect.

The effect of the last topic page is as follows: