CSS generic and grouping selector (10), css generic grouping Selector

CSS generic and grouping selector (10), css generic grouping Selector
I. general Selector

A general selector may be the most powerful but least used of all selectors. A general selector acts like a wildcard that matches all available elements. A general selector is represented by an asterisk. A general selector is used to apply styles to all elements on an object page.

For example, you can use the following rules to delete the default blank boundary on the first element.

*{margin:0;padding:0;}

 

Ii. Group Selector

The Group selector is not a type of selector, but a method of using the selector. When multiple objects define the same style, they can be grouped into a group to simplify the code.

/* Define the titles and paragraphs of all levels as 22px */h1, h2, h3, h4, h5, h6, p {line-height: 22px ;}

Group selector. You can use commas to separate different objects in the same group. The Group selector and class selector are similar in nature and can define the same style for different elements or objects.

Change the following style

.class1{    font-size:13px;    color:red;    text-decoration:underline;    }.class2{    font-size:13px;    color:blue;    text-decoration:underline;    }

Group selector usage

. Class1 {color: red;}. class2 {color: blue;}/* Common style */. class1, class2 {font-size: 13px; text-decoration: underline ;}

The Group selector adheres to the following two principles:

• Convenience principle. You cannot group objects for group purposes. For example, if you extract the same declarations from each element or object into a group, you can only bother yourself. Defining a class is more convenient.
• Proximity principle. If several elements are adjacent and in the same module, you can extract the same declaration and group it. The reason is easy to group, easy to maintain, and easy to understand.