CSS Cascading Learning Notes

Watched the day the controller and the view head are big, so went to the microblogging stroll, saw a discussion CSS weight blog, so the book turned over, CSS in the stack to make a note.

Let's start with an example:

Xiaoming wrote a list and added some styles to the list items inside:

#listli{    color: #000;}

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

The structure is written, I want to call it a day, this time add a demand: When the mouse selects a list item, it turns its color red. Xiao Ming A look, this is not simple, to click on the element to add a class name "selected", and then write the corresponding style is OK!

li.selected{    color: #f00;}

is happy, the result of a run, no matter how the mouse point, what changes are not.

This is the question to be discussed today, why can any change have no, how should solve?

As we all know, every legal document generates a tree, and when we select an element, we create selectors based on the ancestors, attributes, sibling elements, etc. of the element. Only with this tree can the selector work, which is also the core of CSS inheritance.

Inheritance is the mechanism used to pass property values from one element to its descendants, and when determining which values should be applied to an element, the browser takes into account not only inheritance , but also the specificity of the declaration, as well as the origin of the declaration itself. This process is called cascading .

Particularity

For the particularity of a selector, the CSS behaves as 4 parts, representing the weight of the particular, 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) given in the selector, attribute selection ([href], etc.) or Pseudo-class (: Active,:first-child, etc.), add 0, 0, 1, 0
• For each element given in the selector (sign signature) and pseudo-elements (: Before, etc.), add 0, 0, 0, 1
• The Binding ((),, ~, etc.) and the wildcard selector (*) have no contribution to the particularity.

Like what

#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

For their priority values are compared from left to right, hitting a big one, which is high, for example 0, 1, 1, 0 above 0, 1, 0, 0 , 0, 0, 1, 0 above0, 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 above all styles, even if the ID is specified, the inline style will eventually overwrite the style defined elsewhere:

#orange{    color: #ff90000;}<!-- 最终显示还是白色 --><div id="orange" style="color: fff"></div>

Importance

But even with the highest priority inline style, there is a way to overwrite it, which is the !important declaration, which is added before the end of the semicolon.

The priority of the join !important statement will be higher than the other.

.orange{    color: #ff9000 !important;}#book{    color: #ccc;}<!-- 最后显示的是橙色（#ff9000）--><div id="book" class="orange" style="color: #000">example</div>

Inheritance of

The so-called inheritance is that the style applies not only to the specified element, but also to its descendant elements, for example:

h1{    color: #ff9000;}<h1>这是一个<span>大标题</span></h1>

When you assign a color to H1, the color of span changes to orange, because span is a child of H1, as is the case with Li in ul. Of course, there are many styles that are not inherited, such as the border (we certainly do not want to add a border to the outer element after the full border), for margin and padding is the same.

In general, inheritance is the most basic content of a CSS, and we Are "blind" to it.

Cascade

In fact, so many people should be the priority to understand the almost, stacked white is to all the style of calculation, to determine the final application of which style.

Note that for the same priority style, sorted by the order of the Declaration, after the declaration will overwrite the previous declaration, this should not be difficult to understand.

Little Tip

Finally there is a tip, for the style of the hyperlink, we often set its four state style values: not accessed (: link), accessed (: visited), mouse hover (: hover) and mouse down (: Active)

When it comes to particularity, we mentioned that for pseudo-classes, add 0, 0, 1, 0, so the priority of the four is the same, then you need to sort by the order of Declaration, the general recommendations in the Order of L-V-H-A declaration:

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

Change the order to know the reason, the connection is either point or not, so if you put hover or active in front of link and visited will always be covered by them.

Finally, the first scene of this article, it should be easy to solve it now?

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS Cascading Learning Notes