CSS cascade learning notes and css cascade learning notes

CSS cascade learning notes and css cascade learning notes

After reading the big controller and view headers for a day, I went to Weibo to visit and saw a blog discussing CSS weights. So I flipped through the book, take a note of the cascade in CSS.

Start with an instance:

James wrote a list and added some styles to the list items:

#list li{    color: #000;}

<ul id="list">    <li>Javascript</li>    <li>HTML</li>    <li>CSS</li></ul>

After the structure is written, I want to close the work. At this time, I add a requirement: When the mouse selects a list item, it turns the color into red. It's not easy to understand. Add the class name "selected" to the clicked element and write the corresponding style!

li.selected{    color: #f00;}

Happy, the result is a run, no matter how the mouse points, no change.

This is the question to be discussed today. Why is there no change? How can this problem be solved?

We all know that every valid document generates a structure tree. when selecting an element, we create a selector based on the element's ancestor, attribute, and sibling element. Only with this structure tree can the selector work, which is also the core of CSS inheritance.

Inheritance is a mechanism used to pass attribute values from an element to its descendants. when determining which values should be applied to an element, the browser should not only considerInheritance, But also considerStatement particularityIn addition, considerDeclaration SourceThis process is calledCascade.

Special

For the particularity of a selector, CSS shows it as four parts, representing the Special weight, such as 0, 0, 0, 0.

The specific weighting rules are as follows:

• For each id attribute value given in the selector, add 0, 1, 0, 0
• For each class attribute value (class), attribute selection ([href], etc.) or pseudo class (: active,: first-child, etc.) given in the selector, add 0, 0, 1, 0
• Add 0, 0, 0, 1 to each element (Tag name) and pseudo element (: before, etc.) in the selector.
• Delimiter (> ,~ Etc.) and the configuration selector (*) has no contribution to the particularity.

For example

#title{}    //0, 1, 0, 0p span  //0, 0, 0, 2.selected   //0, 0, 1, 0p.bright span.dark  //0, 0, 2, 2div#slidebar *[href]    //0, 1, 1, 1

When their priority is compared by value from left to right, this special feature is high, for example0, 1, 1, 0Higher0, 1, 0, 0,0, 0, 1, 0Higher0, 0, 0, 99

As for how the first item comes from, in fact, the first item represents the inline style of the element, that is, the inline style is higher than all the styles, even if the id is specified, inline styles will eventually overwrite the styles defined elsewhere:

# Orange {color: # ff90000 ;}<! -- The final display is still white --> <div id = "orange" style = "color: fff"> </div>

Importance

But even for the top-priority inline style, we still have a way to overwrite it, which is!importantDeclaration, which is added before the end of the semicolon.

Join!importantThe declared priority will be higher than other ones.

. Orange {color: # ff9000! Important ;}# book {color: # ccc ;}<! -- The last result is orange (# ff9000) --> <div id = "book" class = "orange" style = "color: #000"> example </div>

Inheritance

Inheritance means that a style is not only applied to a specified element, but also to its child element. For example:

H1 {color: # ff9000 ;}< h1> This Is A <span> title </span> 

After h1 is specified, the color of the span changes to orange. Because span is a child element of h1, the same is true for li in ul. Of course, there are also many styles that won't be inherited, such as borders (we certainly don't want to add borders to the outer element and all have borders in it). The same applies to margin and padding.

In general, inheritance is the most basic content in a CSS, And we are "blind to it.

Cascade

As a matter of fact, everyone should have a similar understanding of the priorities. To put it bluntly, it is to calculate all the styles and determine which style is applied at the end.

It should be noted that for styles with the same priority, they are sorted in the declared order, and those declared later will overwrite those previously declared. This is not hard to understand.

Tip

At last, there is a small tip. For hyperlink styles, we often set the four status style values: unaccessed (: link) and accessed (: visited), hover (: hover) and press (: active)

When talking about the particularity, we mentioned that for pseudo classes, the values 0, 0, 1, and 0 are added, so these four have the same priority, then you need to sort by declaration order, generally recommended Statement by L-V-H-A order:

:link{}:visited{}:hover{}:active{}

After changing the order, you can see the reason. The connection is either vertex or not vertex. Therefore, if hover or active is placed before link and visited, they will always be overwritten.

Finally, the first scene in this article should be easily solved now?

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.