Parsing 30 of the most commonly used selectors in CSS

Article Introduction: 30 most commonly used CSS selector parsing.

You may have mastered the basic CSS selectors for ID, class, and background selectors. But this is far from all of CSS. The following is a systematic analysis of the 30 most commonly used selectors in CSS, including our most headache browser compatibility issues. Master them, you can really appreciate the great flexibility of CSS.

1.

* {
margin:0;
padding:0;
}
The star selector will work on every element on the page. Web designers often use it to set the margin and padding of all elements in a page to 0.

The * selector can also be used in a child selector.

#container * {
BORDER:1PX solid black;
}
The above code is applied to all child elements with an ID container element.

Unless necessary, I do not recommend using the Star selector on the page because his scope is too large to consume browser resources.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

2. #X

#container {
width:960px;
Margin:auto;
}
The well number scope has an element of the corresponding ID. ID is one of our most common CSS selectors. The advantage of ID selector is precision, high priority (priority base is 100, far higher than Class 10), as the JavaScript script hook is the best choice, the same disadvantage is also obvious high priority, reusability is poor, so before using ID selector, we'd better ask ourselves, Really to the point of not using ID selector?

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

3.. X

. Error {
color:red;
}

This is a class (class) selector. The difference between the class selector and the ID selector is the set of elements that the class selector can use for the desired styling.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

4. X Y

Li a {
Text-decoration:none;
}

This is also one of our most commonly used selectors-descendant selectors. To select the element y of the x element, the point to note is that this way the selector will select all the matching child elements below it, ignore the hierarchy, so some of the situation is not appropriate to use, such as the above code to remove all of the Li under the underline, but Li also has a UL, I do not want to ul under the Li's a remove underline. When using this descendant selector, consider whether you want a style to work for all descendant elements. This descendant selector also has the effect of creating similar namespaces. For example, the scope of the above code style is obviously li.

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera