Less nth表示式 - tw511教學網

第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

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="style">
   <h2>Hello, you guys!</h2>
</div>
<p class="img">Welcome to Yiibai Yiibai</p>
</body>
</html>

接下來，建立檔案 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檔案，輸出如下得到顯示。