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

This article is to share with you what are the core basic knowledge points of css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Cascading style sheet

What do you mean cascading? Why is the word so important that it appears in its name?

Cascading can be understood simply as a solution to the conflict.

What is conflict?

It means that the same element adds the same style after using different selector selections.

The priority rule can be expressed as

Inline style > ID style > category style > tag style

In a complex page, an element may obtain styles from many places, such as a site

The overall level title is set to use green, while a special column needs to use blue, so you need to use it in the column.

To override common style settings. In a very simple page, such special requirements will not be difficult to implement.

But if the structure of the site is very complex, it is entirely possible that the code will become very messy and may not be found.

The style of an element comes from which rule. Therefore, we must fully understand the principle of "cascading" in css.

Calculating the priority of conflict patterns is a complex process, not just the simple priority rule above.

Can be fully described. But the reader can put a big principle, that is, "the more special the style, the higher the priority."

And how this is special and how to locate it, please take a look at the following content.

Particularity:

Each selector has particularity, and if an element has two or more conflicting attribute declarations, the one with high particularity wins.

The particularity of the selector is determined by the components of the selector itself. The particularity value is expressed in four parts, such as: 0, 0, 0, 0, 0.

The specific particularities of a selector are determined as follows:

For each ID attribute value given in the selector, add one in the second part: 0mem1p0pl 0.

For each class attribute value, attribute selection, or pseudo-class given in the selector, add one to the third part: 0re0.0.0.0.0.

For each element and pseudo element given in the selector, add one to the fourth part: 0j0re0re0pl 1.

Combinators and wildcard selectors do not contribute to particularity.

But the particularity of the wildcard selector is zero, that is, 0, 0, 0, 0, 0.

The combinator doesn't even have zero.

Example:

H2 {color:red;} is 0pl 0pl 0pl 1

P em {color:purple} is 0penol 0pr 0penny 2

.grape {color:purple} is 0pl 0pl 1pl 0

P.b e.a {color:red;} 0,0,2,2

# aa {color:red;} 0,1,0,0

Div#aa * [href] {color:red;} 0, 1, 1, 1, 1.

The first zero is for the inline style, because the earlier it is, the higher the priority. If the position of the non-zero number is the same, then compare the size of the previous number first.

Then compare it down until the numbers are not relative, and the one with the larger number has a higher priority.

That's why there's the rough priority rule above:

Inline style > ID style > category style > tag style

They just can be used as representatives of each part, but also four, sitting in the right seat.

Important statement! important, is to mark the declaration you need, it has the highest priority, but it should be placed at the end of the declared value.

Inheritance:

The particularity of inheritance does not even have zero, but there is no particularity.

There is a big difference between zero particularity and no particularity, that is, the selector with zero particularity can add styles for future generations.

Although inheritance also adds styles to future generations, it is limited that only those who have the ability to inherit can be added to future generations, such as color, while attributes such as margin, padding and border will not be added to future generations.

Those with the same weight are compared in order, and the lower the order, the higher the priority.

Higher particularity is stronger than lower particularity.

So pseudo-class declaration order: link-visited-hover-active

LVHA (abbreviated)

When: visited is after them, because the weight is the same, it will look at their order, while: visited will win after them.

This problem does not occur when you do not write a uniform attribute. So be careful when writing the same attribute!

Thank you for reading! This is the end of this article on "what are the core basic knowledge points of css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.