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

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard