CSS Note 10: Multiple ID Selectors/class selectors contain the same part of the discussion

Sometimes, we can extract the common parts of multiple class selectors or ID selectors, HTML selectors, and write together, so the advantage is that we can simplify the CSS file

1. Let's first look at a piece of code. CSS, as follows:

@charset "Utf-8";/*CSS Document*//*Admissions Ads*/. Ad_stu{width:136px;Height:196px;Background-color:#FC7E8C;margin:5px 0 0 5px;float: Left;}/*AD 2*/. Ad_2{background:#7CF574;Height:196px;width:457px;float: Left;margin:5px 0 0 6px;}/*Real Estate Advertising*/. Ad_house{background:#7CF574;Height:196px;width:152px;float: Left;margin:5px 0 0 6px;} 

Can't find. Ad_stu,. Ad_2, and. Ad_house contain many of the same parts, so it feels so wasteful and not concise that you can't co-ordinate their same parts together?

The answer, of course, is yes.

2. The solution is as follows:

@charset "Utf-8";/*CSS Document*//*Admissions Ads*/. Ad_stu{width:136px;Background-color:#FC7E8C;margin:5px 0 0 5px;}/*AD 2*/. Ad_2{background:#7CF574;width:457px;margin:5px 0 0 6px;}/*Real Estate Advertising*/. Ad_house{background:#7CF574;width:152px;margin:5px 0 0 6px;}/*the common part*/. Ad_stu,. Ad_2,. Ad_house{Height:196px;float: Left;} 

CSS Note 10: Multiple ID Selectors/class selectors contain the same part of the discussion