LESS - 精确匹配与Extend

描述

默认情况下，extend查找选择器之间的精确匹配。对于含义相同的两个nth-表达式，extend并不重要，它只查找与选择器定义相同的顺序形式进行匹配。

示例

以下示例演示了在LESS文件中使用精确匹配与extend：

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h3>Hello!!!!!</h3>
      </div>
      <h4 class = "img">Welcome to TutorialsPoint</h4>
   </body>
</html>

接下来，创建style.less文件。

style.less

.style h3,
h3.style {
   color: #BF70A5;
   font-style: italic;
}
.img:extend(.style h3){}

在extend中，.style h3的定义必须与选择器的定义相同。如果在extend中定义为.style，则extend会将其视为不同。

可以使用以下命令将style.less文件编译成style.css：

lessc style.less style.css

执行上述命令；它将自动创建包含以下代码的style.css文件：

style.css

.style h3,
h3.style,
.img {
   color: #BF70A5;
   font-style: italic;
}

输出

按照以下步骤查看上述代码的工作原理：

将上述html代码保存到extend_syntax.htm文件中。
在浏览器中打开此HTML文件，将显示以下输出。

less_extend.htm

打印页面