About CSS weight

Why do I write li # first as the ID selector? I. A question?

I have seen an article about CSSArticleFor selectors similar to li # first, because the ID can be used to determine the elements, there is no need to write the preceding Li, simply write the ID selector such as # first. It sounds good. It's okay to perform a simple test.

However, we often see selectors with element names. For example, there are a large number of selectors with element names in Microsoft Project templates. If they are useless, why write them like this?

 
Ul # navlist{Float:Right;}Ul # navlist Li{Display:Inline;}
 

2. The problem has occurred!

Write a simple menu using UL and Li, and use borders between menu items to achieve the line interval.

HtmlCodeAs follows:

 <  Ul  ID  = "Navlist" >      <  Li  Class  = "First"  > <  A  Href  = "/"  ID  = "Current"  > Home </  A  > </  Li  >     <  Li  > <  A  Href  = "#"  > Store </  A  > </  Li  >      <  Li  > <  A  Href = "#"  > Shoppingcart </  A  > </  Li  >      <  Li  > <  A  Href  = "#"  > Admin </  A  > </ Li  >  </  Ul  > 

Use the following style sheet, first add a left border for all hyperlinks to draw the dotted line of the interval, and then remove the left border of the first menu item, I used the first style. first.

 
Ul # navlist Li {display: inline;} ul # navlist Li a {border-left: 1px dotted #8a8575; padding: 10px; margin-top: 10px; color: #8a8575; text-Decoration: none; float: Left ;}. first a {border: none ;}
 

Let's take a look at the effect.

Another point is that the level of the ID selector is relatively high, so change the class to ID.

 
<Li id = "first"> <a href = "/" id = "current"> Home </a> </LI>
 

Modify the style sheet.

# First A {border: none ;}
 

But what about the results? Not moving!

The firebug of Firefox is ignored.

Iii. Source Exploration

Why is my style killed in seconds?

There are a large number of articles on the Internet, but they are not the same. Some say they have to consider three levels, but some say they need to consider four levels, but the general direction is roughly about cascade.

It is better to go to the W3C website to see what is going on. Related Standards can be seen on this page. Up to now, there are three CSS standards: css1, css2, and css3.

Css1 is the earliest standard. Here, a simple example is provided to describe the cascade order.

 
Li {...} /* A = 0 B = 0 C = 1-> specificity = 1 */ul Li {...} /* A = 0 B = 0 C = 2-> specificity = 2 */ul ol Li {...} /* A = 0 B = 0 C = 3-> specificity = 3 */Li. red {...} /* A = 0 B = 1 c = 1-> specificity = 11 */ul ol Li. red {...} /* A = 0 B = 1 c = 3-> specificity = 13 */# x34y {...} /* A = 1 B = 0 C = 0-> specificity = 100 */
 

 

In css1, priority is divided into three groups. ID selectors are used as group A, class selectors are used as Group B, and element names are used as group C. Each group appears and is counted once, group A is used for comparison. In the same case, group B is used for comparison, and group C is used for comparison. What selector has a higher priority and what selector provides a valid style. For example, in the above example, 5th sets use the highest level of ID. Therefore, this set of style settings takes effect, and other settings will be ignored.

Css21 Standard

In css2, a group about the style in the row is added, so the group involved in the comparison is composed of four groups, with the highest priority of the style. Similarly, an example is provided in the standard description of css2.

* {}/* A = 0 B = 0 C = 0 D = 0-> specificity = 0, 0, 0 */Li {}/* A = 0 B = 0 C = 0 d = 1-> specificity = 0, 0, 1 */Li: first-line {}/* A = 0 B = 0 C = 0 d = 2-> specificity = 0, */ul Li {}/* A = 0 B = 0 C = 0 d = 2-> specificity =, 0, 2 */ul ol + Li {}/* A = 0 B = 0 C = 0 d = 3-> specificity = 0, */H1 + * [rel = up] {}/* A = 0 B = 0 C = 1 d = 1-> specificity =, */ul ol Li. red {}/* A = 0 B = 0 C = 1 d = 3-> specificity = 0, 0, 1, 3 */Li. red. level {}/* A = 0 B = 0 C = 2 D = 1-> specificity = 0, 0, 2, 1 */# x34y {}/* A = 0 B = 1 c = 0 D = 0-> specificity = 0, 1, 0, 0 */style = ""/* A = 1 B = 0 C = 0 D = 0-> specificity = */

 

<Style type = "Text/CSS" > # X 97 Z { Color : Red } </Style> <P id = "X97z" Style = "Color: Green" > </P>

 

In this example, the style has the highest priority, so it will overwrite the settings by ID, and the color is green.

4. Solve the Problem

From the above analysis, we can see that only providing selector is not enough to take effect, but also the priority level of selector. In our problem, even if we use ID to select the first menu item: # First A, which includes an ID and an element name, gives priority:

A = 0, B = 1, C = 0, D = 1

However, the general selector is like this: ul # navlist Li A, but the priority includes an ID and three element names, so the priority level is:

A = 0, B = 1, C = 0, D = 3

So our selector is no better than a general selector. The tragedy has occurred!

Once we know the cause, the problem will be simple. We can improve the priority of our selector and exceed the priority of the General selector. For example, we can write it as follows:

 
Ul # navlist li # First
 

 

What is the current priority?

A = 0, B = 2, c = 0, D = 3

The comparison between group B has exceeded, and check whether the comparison is successful!

You can also add importance descriptions or solve them .! Important must be written between the style and semicolon, and each style must be declared separately.

 
# First A {border: none! Important ;}
 

It seems that the selector is not that simple!

------------------------

thanks to Situ zhengmei's dedication, reprinted address: http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html