Home > Web Front-end > CSS Tutorial > The role of !important in css

The role of !important in css

高洛峰
Release: 2016-11-24 10:31:31
Original
2290 people have browsed it

!important is a syntax defined in CSS1. Its function is to increase the application priority of specified style rules. Syntax format { cssRule !important }

{*cssRule !important} This css rule has become very popular in web page production. In the past, my understanding of it stayed at the 'browser recognition stage' without really I went to study it, but now things have changed. Let’s look at a few examples.

Example 1:

CSS

#Box {

color: red !important;

color: blue;

padding: 30px;

width : 300px;

border:1px solid pink;

}

Html

In different browsers, the color of this line of text should be different!

Then in browsers that support this syntax, such as Firefox, Opera, and Chrome, the priority of !important can be understood, and the font color displays red, while in IE it displays blue. Because the IE browser does not recognize !important, non-IE browsers recognize !important, and !important has a higher priority. Then look at the following example, just exchange the order of the color attribute in the CSS style, and the Html code part remains unchanged. What will happen?

CSS

#Box {

color: blue;

color: red !important;

padding: 30px;

width : 300px;

border:1px solid pink;

}

Then In this case, regardless of whether it is recognized by IE browser or non-IE browser, the font color will display red color. Although the IE browser does not recognize !important, it recognizes the color:red in the sentence "color: red !important;". Therefore, under IE, the browser first recognizes "color: blue", and then recognizes the color: red in "color: red !important;", thus covering the previous "color:

blue", so the final font color All are displayed as red.


Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template