Sharing examples of css style override order in style sheets

Sometimes in the process of writing CSS, certain restrictions always do not work, which involves the issue of CSS style coverage, as follows

Css code

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

Looking in some textbooks (w3schools, etc.), it only says that the order of css is "style on the element" > "style element in the file header" > "external style file" , but there is no detailed explanation on how to arrange the priorities of multiple identical styles in the style file. After testing and continuing to search, I learned that the priorities are arranged as follows:

1. The more precise the element selector selection of the style sheet, the higher the priority of the style:

The style specified by the id selector> The style specified by the class selector> The style specified by the element type selector

So in the above example, the style priority of #navigator is greater than the priority of .current_block, in time .current_block is the latest addition and doesn't work either.

2. For styles specified by the same type of selector, the later in the style sheet file, the higher the priority

Note, this is the style sheet file The later in the element, the higher the priority, not the order in which the element class appears. For example, .class2 appears after .class1 in the style sheet:

Css code

.class1 {  
    color: black;  
}  

.class2 {  
    color: red;  
}

When specifying a class for an element, use class="class2 class1" Specified in this way, although class1 is ranked behind class2 when specified in the element, because class1 is in front of class2 in the style sheet file, class2 still has a higher priority at this time, and the attribute of color is red, not black. .

3. If you want the priority of a certain style to be higher, you can use !important to specify:

Css code

.class1 {  
    color: black !important;  
}  

.class2 {  
    color: red;  
}

At this time class will use black instead of red.

There are two solutions to the problems encountered at the beginning:

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  

.block {  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

 需要莫仁为#navigator元素指定class="block"

 

2. 使用!important:

 Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0 !important;  
}

The above is the detailed content of Sharing examples of css style override order in style sheets. For more information, please follow other related articles on the PHP Chinese website!