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)){}当我们编译上面的代码在命令提示符下，那么你会得到一个错误信息，如下图所示。
编译后，您将得到下面的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文件，输出如下得到显示。
