开发学院

您的位置:首页>教程>正文

教程正文

LESS !important关键字

LESS !important关键字

  !important关键字用于覆盖特定属性。当它放在混合调用之后,被标记为!important的优先级最高,不会继承来自父级的定义.

例子

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>The !important keyword</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "para1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "para2">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

  接下来创建style.less文件

/*style.less*/
.mixin() {
   color: #900;
   background: #F7BE81;
}

.para1 {
   .mixin();
}

.para2 {
   .mixin() !important;
}

  使用下面命令编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
.para1 {
   color: #900;
   background: #F7BE81;
}

.para2 {
   color: #900 !important;
   background: #F7BE81 !important;
}

输出

  执行以下步骤:

  •   保存上面的HTML代码在 less_mixin_important.html 文件。

  •   在浏览器中打开该HTML文件,得到如下输出显示。

less_mixin_important.jpg