CSS Universal and Group selector (10)

I. Universal Selector

The universal selector is probably the most powerful of all selectors, but with minimal use. The universal selector acts like a wildcard, which matches all available elements. The universal selector is represented by an asterisk. Generic selectors are typically used to apply styles to all elements on an object page

For example, you can use the following rule to remove the default white space boundary on the first element

* {margin:0; padding:0;}

Second, group selector

The group selector is not a selector type, but rather a selector usage method. When multiple objects define the same style, they can be grouped into groups, simplifying the code.

/* define title and paragraph line height of 22px for all levels */ h1,h2,h3,h4,h5,h6,p {    line-height:22px;}

Grouping selectors, you can use commas to separate different objects within the same group. The group selector is somewhat similar in nature to the class selector, and you can define the same style for different elements or objects.

Change the following styles

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

The group selector uses

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

Group selector adhere to the following two principles

• Convenience principle. Can not be grouped for grouping, such as each element, the object has the same declaration are extracted into a group, can only bring trouble to themselves. It is more convenient to define a class at this time
• Nearest principle. If several elements are adjacent and within the same module, consider extracting the same declaration for grouping. Reasons for easy grouping, ease of maintenance, and easier understanding

CSS Universal and Group selector (10)