LESS - 第 n 个表达式
说明
在 extend 中,第 n 个表达式的形式很重要,否则它会将选择器视为不同。第 n 个表达式 1n+2 和 n+2 是等效的,但 extend 会将此表达式视为不同。
例如,使用以下代码创建一个 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;
}
在属性选择器中,引号类型并不重要,您可以在以下示例 − 中看到它
示例
以下示例演示了 LESS 文件中第 n 个表达式的用法 −
extend_syntax.htm
<!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>
接下来,创建 style.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"]) {}
您可以使用以下命令将 style.less 文件编译为 style.css −
lessc style.less style.css
执行上述命令;它将使用以下代码自动创建 style.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.htm 文件中。
在浏览器中打开此 HTML 文件,将显示以下输出。
