Priority of styles in css stylesheet

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

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

Find some textbooks (w3schools, etc.), just say The order of css is "style on the element" > "style element in the file header" > "external style file", but there is no detailed explanation of how the priorities of multiple identical styles in the style file are arranged. After testing and continuing to search, we 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:

.class1 {
    color: black;
}
.class2 {
    color: red;
}

When an element specifies class, it is specified using class="class2 class1". At this time, although class1 is specified in the element, it is ranked first. behind class2, but 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.

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

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

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

At this time, the class will use black instead of red.

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

1. Take the border out of #navigator and put it in a class .block , and .block is placed before .current_block:

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

You need to specify class="block" for the #navigator element

2. Use !important:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0 !important;
}

For more articles related to the priority of styles in css style sheets, please pay attention to the PHP Chinese website!