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文件,输出如下得到显示。