How are css selector priorities determined?

In the process of website construction, css is an important attribute for controlling web page style. So this article will summarize and introduce to you the relevant knowledge about css class selectors and css priority ranking.

First of all, let me introduce to you the types of css selectors:

1. Tag name selector

According to the specified tag name, find all the names of this name in the current interface label and then set the properties.

The tag selector selects all tags with that name in the current interface, and cannot select a single tag individually; the tag selector can find it no matter how deep the tag is hidden; as long as it is a tag in HTML Both can be used as tag selectors.

2. Class selector

Find the corresponding tag according to the specified class name, and then set the attributes.

Each HTML tag has a class attribute, which means that each tag can set a class; the class is not repeatable in the same interface; when writing the id selector, it must be added before the class. ;The naming convention for class names is the same as the id naming convention; the class name is specifically designed to set the style for a specific tag; in HTML, each tag can be bound to multiple class names at the same time.

3. ID selector.

Find the corresponding tag based on the specified id name, and then set the attributes.

Every HTML tag has an id attribute, which means that each tag can set an id; the id is not repeatable in the same interface; when writing an id selector, be sure to add # before the id. ; The name of the id has certain specifications. The name of the id can only be composed of letters, numbers, and underscores; it cannot start with a number; it cannot be a keyword; in enterprise development, generally if it is just for setting styles, we will not use the id, because the id is for js. .

#How to divide css priority ranking?

Generally speaking, the more special a selector is, the higher its priority. That is, the more accurately the selector points, the higher its priority.

Usually we use 1 to indicate the priority of the tag name selector, 10 to indicate the priority of the class selector, and 100 to indicate the priority of the ID selector.

For example, in the above example, the selector priority of .polaris span {color:red;} is 10 1, which is 11; while the priority of .polaris is 10; the browser will naturally display red words. After understanding this principle, the following priority calculation is easy:

div.test1 .span var priority 1 10 10 1

span#xxx .songs li priority 1 100 10 1

#xxx li Priority 100 1

Regarding which selector to use under what circumstances, the principle of using different selectors is:

First: accurately select the desired Control tags;

Second: Use the selector with the most reasonable priority;

Third: HTML and CSS codes should be as concise and beautiful as possible.

The above is the detailed content of How are css selector priorities determined?. For more information, please follow other related articles on the PHP Chinese website!