Less nth表達式

第n個表達式的形式是在某種程度上重要的，否則它對待選擇器也不同。第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;
}

在屬性選擇器，你可以看到它在下面的例子中引用類型並不重要：

示例

下面的例子說明如何使用第n個表達式在less文件：

extend_syntax.html

Welcome to Yiibai Yiibai

接下來，創建文件 style.less

style.less

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

你可以編譯 style.less 文件使用以下命令來生成 style.css 文件：

lessc style.less style.css

接着執行上面的命令，它會自動創建 style.css 文件，下面的代碼：

style.css

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

輸出

讓我們來執行以下步驟，看看上面的代碼工作：

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

• 在瀏覽器中打開該HTML文件，輸出如下得到顯示。