LESS 更改選擇器順序

2018-01-11 14:51 更新

描述

在選擇器排序更改時(shí)，將選擇器預(yù)留到繼承（父）選擇器很有用。 這是通過在選擇器之后放置＆。 例如，當(dāng)您使用Modernizer時(shí)，您可能希望根據(jù)支持的功能指定不同的規(guī)則。


例子

下面的示例演示了如何在LESS文件中使用更改選擇器順序：

<html>
<head>
   <link rel="stylesheet" href="changing_selector_order.css" type="text/css" />
   <title>Parent Selector</title>
</head>
<body>
  <div class="header">
    <div class="menu">
      <h2>Welcome to W3Cschool</h2>
      <p>It is possible to reference the parent selector by using &(ampersand) operator.</p>
    </div>
  </div>
</body>
</html>


接下來(lái)，創(chuàng)建文件 style.less

style.less

.header {
  .menu {
    border-radius: 5px;
    border: 1px solid red;
    & {
      padding-left: 200px;
    }
  }
}


您可以使用以下命令將 style.less 文件編譯為 style.css ：

lessc style.less style.css


接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件：

style.css

.header .menu {
  border-radius: 5px;
  border: 1px solid red;
  padding-left: 200px;
}

.no-borderradius＆amp; 選擇器將會(huì)在其父選擇器 .header .menu 之前加上 .no-borderradius

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

  • 將上述html代碼保存在 changing_selector_order.htm 文件中。

  • 在瀏覽器中打開此HTML文件，將顯示如下輸出。


輸出
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)