CSS universal and grouped selectors (10)_html/css_WEB-ITnose

1. Universal Selector

The universal selector may be the most powerful of all selectors, but it is the least used. A universal selector acts like a wildcard, matching all available elements. Universal selectors are represented by an asterisk. Universal selectors are generally used to apply styles to all elements on the page

For example: you can use the following rule to delete the default white space border on the element

*{margin:0;padding:0;}

2. Group selector

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

/*定义所有级别的标题和段落行高为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. Group selectors are somewhat similar to class selectors in that they can both 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 grouping selector uses

.class1{    color:red;    }.class2{    color:blue;    }    /*共同样式*/.class1,class2{    font-size:13px;    text-decoration:underline;    }

The grouping selector sticks to the following two A principle

Principle of convenience. You cannot group for the sake of grouping. If you extract the same declarations from each element or object and group them into one group, you will only cause yourself trouble. At this time, it will be more convenient to define a class

Proximity principle. If several elements are adjacent and in the same module, you can consider extracting the same declarations and grouping them. Reasons are easy to group, easy to maintain, and easier to understand