The concept of cascading cascade for CSS style weights

We know that Firefox is a browser in many browsers that is highly compatible with CSS 2, a case that I can write to a medium-to-business website (and not a problem I have encountered) in the Zen garden. It is said that a menu in the CSS defined in the future can only be displayed in Firefox normal. Because there are too many filters involved in that CSS, there is support for the powerful feature of "cascading (Cascade)" in CSS.

So what does cascading in the cascading style sheet CSS mean? This is how the CSS cascade assigns weights to each style rule, and if the element applies more than one style rule, the style with the highest weight is preferred.

I heard that the search engine on a site to give a higher or lower weight, but the CSS in the "cascade" given the weight of what? The definition of this is very meaningful, but it contains only two messages to us, that is---particularity and inheritance. These two concepts will be a mentor to our study. Of course, everything is two-sided, it may become our nightmare! Next we'll focus on what this cascade can bring to our writing!

Cascading summarizes the two concepts---specificity and inheritance, let's start with this inheritance, the inheritance is that you define a style that the style can be applied to its descendants of children, of course, do not have to use a style, you can also give several selectors in several different styles. Let's look at the code in the line:

1

.box

2

{

3	/*定义了一个样式这个样式将会运用到里面元素的h1,h2,h3,h4,p,ul,li等子孙元素*/

4	color:red;

5

}

Let's look at the snippet code:

01

.box

02

{

03	/*box运用了一个样式，它的子孙要默认这个样式，这就是继承*/

04	color:red;

05

}

06	.box .archive

07

{

08	/*但是拥有.archive这个选择器的标签不老实，他不用老祖宗的东西，自己创造了个green的样式来，这样权重提高了，他就可以不用继承了*/

09	color:green;

10

}

So you can probably figure out what this inheritance means? If we want to define a style each time, each write a selector, exhausted people, unimaginable how much work.

Let's take a look at what this particular charm is.

We have already come to see two examples, we should also be able to read something about it, first we see the following rules than the previous weight high, a little bit more special, although the specific example looks relatively simple, but it itself has a lot of problems. We may have inadvertently created a particularly outrageous style rule, and if we want to solve it, we need to come up with more special style rules! Looking at the code (with the code having the Truth):

01	body>html #head ul.navigation li.home a

02

{

03	/*本来这个就可以命令a的元素样式为红色，鼠标移动过也是一样，但我们想让它移动过去有变化怎么办？*/

04	color:red;

05

}

06	body>html #head ul.navigation li.home a:hover

07

{

08	/*ok这段代码解决了，这就是特殊中的特殊，来继承已经不能控制我了，哈哈*/

09	color:green;

10

}

Control particularity: Do we see the above is too special? A little too complicated? That's okay, let's get to the next code truth.

01	#linklist ul li h3

02

{

03	/*虽然标准，但是还是有些别扭*/

04	color:red;

05

}

06	#linklist h3

07

{

08	/*看我比较渐变吧，轻装上阵*/

09	color:red;

10

}

The above example shows that we can not work on a layer by piece, and sometimes even the parsing of the browser is a burden. Wrote a lot of extra selectors, but did not get the proper evaluation.

Theoretically, the weight-to-height problem of CSS rules depends on the computed results of CSS selector precedence. CSS inline styles and various selectors can be represented by a numeric value:

• The inline style (that is, directly in the structure to the element style property) is: 1000
• The ID selector is: 0100
• Class Selector, each property selector (shape such as [attr=value], etc.), each pseudo-class (shape: hover, etc.): 0010
• The type selector (that is, the label element or pseudo Element) is: 0001
• The other selectors include the global selector *, plus 0000. No, but it's also a specificity.

The final establishment of a certain style weight depends on the result of the addition of each selector, such as: Jinyun County foreign Experts Bureau

View Source print?

1

选择符 特性值

2	h1{color:blue;}     1

3	p em {color:purple;}     1+1=2

4	.apple {color:red;}  10

5	p.bright {color:yellow;} 1+10=11

6	p.bright em.dark {color:brown;}  1+10+1+10=22

7	#id316{color:yellow}    100

By adding the number of strings to bits by these rules, the final weight is obtained, and then the comparison is based on the left-to-right order. The weight of CSS inheritance is very low, it is 0 lower than the weight of ordinary elements. Therefore, the shape of the body>html #head ul.navigation li.home a selector, to achieve the subclass inherits its subclass selector weight value can not be lower than its own weight value, and this also increases the burden of the browser, so you can use the method described above to control its particularity.

The concept of cascading cascade for CSS style weights