跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS The !important Rule

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS The !important Rule

CSS !important Rule

The !important rule is used to give the value of a specific property the highest priority.

The !important rule will override ALL previous styling rules for that specific property on that element!

The !important keyword is added to the end of a CSS declaration, before the semicolon.

Syntax

selector {
  property: value !important;
}

CSS !important Rule Example

In the following example, all three paragraphs will get a yellow background color, even though the inline style, id selector, and the class selector have a higher specificity. The !important rule overrides ALL styling rules for that specific property on that element!

Example

Using the !important rule:

<html>
<head>
<style>
p {
  background-color: yellow !important;
}

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

</style>
</head>
<body>

<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>

</body>
</html>

Try it Yourself »

Use !important Sparingly

The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity in the source code - and here the problem starts!

The CSS code will be confusing and the debugging will be hard! Especially if you have a large style sheet!

In the following example, it is not very clear which color is considered most important:

Example

p {
  background-color: red !important;
}

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

Try it Yourself »

A Few Fair Uses of !important

The !important rule can be useful in some cases, like:

1. To override a style that cannot be overridden in any other way. This could be if you are working in a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.

2. To respect user preferences. Some users have motion sensitivity and prefer websites with less animation. CSS has a @media feature called prefers-reduced-motion that lets you check if a user has asked to reduce motion, such as animations or transitions. You can use !important to turn off, or tone down animations and transitions for the users who has activated this setting on their computer:

Example

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
Try it Yourself »

You will learn more about media queries in a later chapter.

3. To create a highly specific, unchangeable style for a specific element. Assume we want a special look for all link buttons on a page:

Example

Style link buttons with a gray background color, white text, and some padding and border:

a.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
  text-decoration: none;
}

Try it Yourself »

Now, if we put a link button inside another element with higher specificity, the properties might get in conflict. Here is an example of this:

Example

a.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
  text-decoration: none;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Try it Yourself »

To "force" all buttons to have the same look, no matter what, we can add the !important rule to the properties of the button, like this:

Example

a.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
  text-decoration: none !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Try it Yourself »


  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。