开发学院

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

教程正文

LESS nth表达式

LESS nth表达式

  nth表达式的形式是在某种程度上重要的,否则它会将选择器视为不同的。第n个表达式1n+2 和 n+2 是等价的,但扩展对待这种表达式不同。

  比如,创建具有下面的代码在一个Less文件:

:nth-child(n+2)
{
color: #BF70A5;
  font-style: italic;
}
.child:extend(:nth-child(1n+2)){}

  当我们编译上面的代码在命令提示符下,那么你会得到一个错误信息,如下图所示。

less-nth-command.jpg

  编译后,您将得到下面的CSS代码。

:nth-child(n+2) {
  color: #BF70A5;
  font-style: italic;
}

例子

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Hello!!!!!</h2>
      </div>
      <p class = "img">Welcome to TutorialsPoint</p>
   </body>
</html>

  接下来创建less文件

/*style.less*/
[title = tutorialspoint] {
   font-style: italic;
}

[title = 'tutorialspoint'] {
   font-style: italic;
}

[title = "tutorialspoint"] {
   font-style: italic;
}
.style:extend([title = tutorialspoint]) {}
.container:extend([title = 'tutorialspoint']) {}
.img:extend([title = "tutorialspoint"]) {}

  使用下面命令编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
[title = tutorialspoint],
.style,
.container,
.img {
   font-style: italic;
}

[title = 'tutorialspoint'],
.style,
.container,
.img {
   font-style: italic;
}

[title = "tutorialspoint"],
.style,
.container,
.img {
   font-style: italic;
}

输出

   执行以下步骤:

  •   保存上面的 html 代码到 extend_syntax.html 文件。

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

less-extend-output6.jpg