Detailed explanation of !important, *, _ symbols in CSS styles-HTML Tutorial-php.cn

Detailed explanation of !important, *, _ symbols in CSS styles

亚连

Release： 2018-05-21 15:23:24

Original

1655 people have browsed it

This article mainly introduces the relevant information about !important, *, and _ symbols in CSS styles. I hope this article can help everyone. Friends in need can refer to

Detailed explanation of CSS The !important, *, _ symbols in the style

!important, *, _ are actually useless. They are all used to set the priority of the style. However, you can arrange the priority of the style by yourself. Set in sequence, but you still have to understand it.

We know that CSS written in different places has different priorities. The definition in the .css file < attribute in the element style, but if you use !important, things will become different.

First of all, let’s look at the following piece of code:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <p style="color:blue !important;color:red;"> 
    呵呵 
  </p> 
</body> 
</html>

Copy after login

The word "haha" is defined with two colors. Originally, after color:red and color:blue, these two words should be red. , the color closest to the font is taken by default
However, !important is added after color:blue, causing color:blue to have the highest priority, and the word "haha" should be blue. The specific effect is as follows:

However, IE6 does not recognize the !important symbol in the style attribute, so it still makes the word "haha" red according to the original style priority.

The !important, *, and _ symbols in the css style are all used to set priorities, but these symbols are only applicable in specific browsers, as follows:

IE All can recognize *; standard browsers (such as FF) cannot recognize *;

IE6 can recognize *, but not !important;

IE7 can recognize both * and !important;

FF cannot recognize *, but it can recognize !important;

underscore "_", IE6 supports underline, but neither IE7 nor firefox supports underline.

Therefore, you can define the following attributes in the style attribute to distinguish IE6, IE7, and firefox:

background:orange;*background:green;_background:blue;

Copy after login

You can also distinguish IE6, IE7, and firefox in this way:

background:orange;*background:green !important;*background:blue;

Copy after login

The following code:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <p style="background:orange;*background:green !important;*background:blue;"> 
    区分IE7、IE8、火狐 
  </p> 
  <p style="background:orange;*background:green;_background:blue;"> 
    区分IE7、IE8、火狐 
  </p> 
</body> 
</html>

Copy after login

The running effect is as follows:

(1) IE7

(2) IE8 and above browsing Devices, including firefox, etc.

(3) IE6

However, this difference can only be used for debugging, the real front-end Programming should still use JavaScript to identify browsers to determine the types of these browsers.

Finally, I would like to add that in fact, IE6 just cannot recognize !important in style. If the code is as follows:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>测试Css中的!Important区别</title>  
  <style type="text/css"> 
    .testClass{  
    color:blue !important; 
    } 
  </style> 
</head> 
<body> 
  <p class="testClass" style="color:red;"> 
    测试Css中的Important 
  </p> 
</body> 
</html>

Copy after login

The performance is consistent whether it is in ie6-10 or Firefox and Chrome. , all show blue.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of the position: fixed problem in IE6

The front-end obtains the return value example of http status code 400_ Basic tutorial

JavaScript memory leak problem in versions before IE9 (detailed summary)

The above is the detailed content of Detailed explanation of !important, *, _ symbols in CSS styles. For more information, please follow other related articles on the PHP Chinese website!