30 most common css selector resolutions

You may have mastered the basic css selectors such as id, class, and background selector. But this is far from the whole of css. The following describes the 30 most commonly used selectors in css parsing for your system, including our biggest browser compatibility issue. Only by mastering them can we truly appreciate the great flexibility of css.

1. Star selector will work on every element on the page. Web Designers often use it to set the margin and padding of all elements on the page to 0.

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

The code above applies to all sub-elements whose id is the container element.

Unless necessary, I do not recommend using the star selector on the page because it has a large scope and consumes browser resources.

Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera

2. # X

The well number scope has the corresponding id element. Id is one of our most commonly used css selectors. The advantage of the id selector is precision and high priority (the priority base is 100, much higher than the 10 of the class). As the best choice for javascript script hooks, the disadvantage is that the priority is too high, poor reusability, so before using the id selector, we 'd better ask ourselves, is it true that we are not using the id selector?

Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera

3. X

. Error {
Color: red;
}

This is a class selector. The difference between the class selector and the id selector is that the class selector can act on a group of elements in the expected style.

Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera

4. X Y

Li {
Text-decoration: none;
}

This is also our most common selector-descendant selector. It is used to select sub-element Y under Element X. Note that this method selects all matched sub-elements and ignores the hierarchy. In some cases, this method is not suitable, for example, the above Code removes the underlines of all a under li, but there is a ul in li, and I do not want to remove the underscores OF a under ul. When using this descendant selector, consider whether you want a style to work for all child elements. This type of descendant selector also plays a role in creating namespaces. For example, the scope of the above Code style is obviously li.

Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera

• 7 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• Next Page