30 most common css selector resolutions

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.