Shulou(Shulou.com)06/01 Report--

This article mainly introduces the types of css selectors, the article is very detailed, has a certain reference value, interested friends must read it!

I. label signature selector

According to the specified label signature, find all tags of that name in the current interface, and then set the properties.

Tag selector selects all tags of that name in the current interface, not a single tag; tag selector can be found no matter how deep the tag is hidden; as long as it is a tag in HTML, it can be used as a tag selector.

Class selector

Find the corresponding label based on the specified class name, and then set the property.

Every HTML tag has a class attribute, that is, each tag can be set class; in the same interface class is not repeatable; when writing id selector must add.; class name naming convention and id naming convention is the same; class name is specifically for a specific tag style; in HTML each tag can be bound to multiple class names.

Third, ID selector.

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

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

0df1f70c2c7dfe407f3cb5c627f9500.png

How is the priority of css divided?

In general, the more special the selector, 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 signature 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 .polarisspan {color:red;} is 11, and the priority of .polaris is 10; the browser will naturally display red words. Once you understand this, the following priority calculation is easy:

Div.test1.spanvar priority 1 "10" 10 "1

Span#xxx.songsli priority 1 "100" 10 "1

# xxxli priority 100: 1

For what selector to use under what circumstances, the principles for using different selectors are:

First: accurately select the label to be controlled

Second: use the selector with the most reasonable priority

Third: HTML and CSS code should be as simple and beautiful as possible.

The above is all the content of the article "what are the types of css selectors?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.