Explore the application of css !important_html/css_WEB-ITnose

Definition and syntax:

!important is a syntax defined in CSS1. The function of is to increase the application priority of specified style rules .

Grammar format: { cssRule !important }, that is, !important is written at the end of the definition,

For example:

box{color:red !important; }

Compatibility:

Application scenarios:

Scenario 1:

<!--应用场景一--><div id="content">	<p class="p1">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october. 熟悉合作情况的戴姆勒高管说，戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p>	<p class="p2">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october. 熟悉合作情况的戴姆勒高管说，戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p></div>

    #content p{        color: orange;    }    .p1{color: blue;}    .p2{color:blue !important;}

Display effect:

Note:

By default, the priority of class is lower than id, so even if p1 uses class to redefine its own style, it cannot It takes effect, so it inherits the parent properties, and this line is still orange!
However, in p2, important is used to increase the priority (or regarded as forced redefinition), so the css here takes effect and this line of text turns blue!

　

Scene 2:

<!--场景二-->	<div class="color1 color2">	The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october. 熟悉合作情况的戴姆勒高管说，戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。	</div>

	/*应用场景二*/	.color1{color: blue;}	.color2{color:orange !important;}

Display effect:

Note:

When multiple classes jointly control a certain When creating a style, you can use !important in a class to
display priority

online demonstration: http:// codepen.io/anon/pen/OVjXPQ