Master the usage of five CSS selectors used in HTML5 development

Summary

This article and we will focus on the five types of CSS selectors, we do not have to give each element to define the class or ID, through the appropriate organization, can be the simplest way to achieve the same effect.

The five most common types of CSS selectors

Some novice friends on the selector smattering, do not know under what circumstances to use what kind of selector, this is a more headache problem, for novice friends, CSS selector to make some simple explanation, hope to everyone's study work has certain help.

Accurate and concise use of CSS selectors will achieve very good results. We don't have to define the class or ID for each element throughout, and with the right organization, you can do the same thing in the simplest way possible. In the actual work, the most commonly used selectors have the following five categories:

First, Tag selector:

As implies, Tag Selector is a direct HTML tag as a selector, can be p, H1, DL, strong and other HTML tags. Such as:

Second, ID selector:

Every tag he has a common attribute ID, so we usually define the ID for the page element:

where "P1", "P2", "P3" are the ID names you define yourself. Note the "#" number in front.
The ID selector also supports descendant selectors (for nested tags):

Three, class selector:

Each tag also has a class attribute, so the category selector definition is represented in the CSS with a dot, for example:

In the page, with class= "category name" method call, this method is relatively simple and flexible, can be created and deleted according to the needs of the page at any time. But multiple class syndrome needs to be avoided.

Four, group selector:

When several element style attributes are the same, a declaration can be called together, separating the elements with commas. Such as:

Let's look at the group selector (tag, ID, Class):

Using the group selector will greatly reduce the CSS code, will have multiple elements of the same attributes, merging groups to select, define the same CSS properties, which greatly improve the efficiency of coding and CSS file volume.

V. Descendant selector:

The descendant selector is also known as a derived selector, and you can make the markup more concise by defining the style based on the context of the element in its place.
In CSS, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but whatever you call them, they work the same way.
A derived selector allows you to determine the style of a label based on the context of the document. By using derived selectors reasonably, we can make the HTML code neater.
For example, if you want the strong element in the list to become italic instead of the usual bold character, you can define a derived selector like this:
Note The context relationship of the blue Code that is marked:

In the example above, only the strong element in the LI element is styled in italics, without defining a particular class or ID for the strong element, and the code is more concise.

Combined with the above five CSS selectors, basically meet the needs of the CSS layout, mainly in the use of flexible, especially the use of descendant selectors can greatly simplify the HTML document, so that the HTML structure is clear, the smallest code to achieve the same effect.
When the selector is finished, let's take a look at the priority of the selector.

The priority of the six-comparator

Compare the number of the same level, the number of high priority, if the same is compared to the next level of the number of levels of priority, we should have been very clear, is:

| 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承

This also explains why the definition of 11 tags is less than the definition of 1 classes, 1 classes plus 11 tags will be less than the weight of 2 classes.

The prioritization of selectors is very important.
It was previously said that the priority of the selector was tagname=1,classname=10,id=100, so the selector #demo > ul >. The priority of active is 100+10+1 = 111, which is actually calculated, Does the 10 class have the same priority as an ID?

Here's a look at the official definition of selectors:
The priority of a selector is determined by a four digit a,b,c,d. When comparing two selectors, first compare the high priority of the A,a value, and if a is equal the higher the priority of the B,b value, and so on. Therefore, no matter how large the value of B is, there is no effect on the comparison of a value.

a由style确定，如果一个属性由元素上的style属性定义则a为1，否则a为0b是id的数量c是class和伪类以及属性的数量d是tagname以及伪元素的数量

Following this rule, let's take a look at the priority of this selector:

Let's take a look at the priority example:

The element in the previous example is green because the inline element has the highest precedence
It is also possible to conclude that the superposition of low-priority selectors does not affect the high-priority selectors.

End

Summed up, we have seen after the harvest!

Master the usage of five CSS selectors used in HTML5 development