How to use !important rules in CSS? (code example)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use !important rules in CSS? (code example)

青灯夜游

Feb 20, 2019 am 09:56 AM

css

One of the best ways to learn how to code a website is to look at the source code of other websites and learn some useful techniques. When viewing the source code, you may see "!important" in the code; what does this mean? What is the use? The following article will take you through the !important rules, I hope it will be helpful to you.

How to use !important rules in CSS? (code example)

!What are the important rules? how to use?

!important is a CSS rule used to increase the application priority of a specified CSS style rule; it is added to the end of a CSS value to give it more weight. [Video tutorial recommendation: CSS tutorial]

In CSS, style rules are applied to elements in a cascading manner. The higher the weight in the following list, the smaller the weight:

● Browser style: It is the default style declared by the web browser.

● User-declared styles: Custom styles set by users using browser options or modified through developer debugging tools.

● Style declared during development: It is the style declared by the website developer in the CSS style sheet.

● Developer-declared styles with !important rules.

● User style with !important rules.

!important rule usage example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#container{
	width: 450px;
	height: 200px;
	font-size: 25px;
}

#example{
color:red !important;
}

#container #example{
color:pink;
}
</style>
</head>
<body>

<div id="container">
    <div id="example">PHP中文网！</div>
</div>

</body>
</html>

Rendering:

How to use !important rules in CSS? (code example)

Example description:

In this example, we first have an include! The style of the important rule defines the text color of an element (#example) as red. Then we have another style that changes the text color of this element (#example) to pink. because! important statement, so the text color of the element (#example) is now red instead of pink. If we didn't use it! important, then the color will be pink.

When to use !important rules?

You should not use !important rules unless absolutely necessary; using !important rules will break the natural cascading effect of the style sheet, making the code difficult to maintain. However, there are some situations where you have to use it! important:

1. When testing and debugging the website, the !important rule is very useful.

If we have some CSS issues in our code and want to make sure a specific style is applied, we can use the !important rule to temporarily fix the problem on the site until we find a better way (which may take some time).

2. Output style sheet

!important rules can also be used for output style sheets to ensure that styles are applied without being overwritten by anything else.

Conclusion

Using !important has no negative impact on performance; but from the perspective of maintainability, unless absolutely necessary, use !important should be avoided as much as possible rule, it should only be used in special circumstances.

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use !important rules in CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement

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

CSS Inclusion: Choosing the Right Method for Your ProjectMay 16, 2025 am 12:02 AM

ThebestmethodforincludingCSSdependsonprojectsizeandcomplexity:1)Forlargerprojects,useexternalCSSforbettermaintainabilityandperformance.2)Forsmallerprojects,internalCSSissuitabletoavoidextraHTTPrequests.Alwaysconsidermaintainabilityandperformancewhenc

This Isn't Supposed to Happen: Troubleshooting the ImpossibleMay 15, 2025 am 10:32 AM

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

See all articles