LESS扩展附加到选择器.pdfVIP

LESS 扩展附加到选择器 描述 扩展连接到⼀个选择器，它看起来类似于具有选择器作为参数的伪类。 当规则集具有 多选择器时，则关键字扩展可以应⽤于任何选择器。 以下是⽤于定义代码中 extend 的格式。 在选择器之后扩展。 [例如： pre ：hover ：extend （div pre ）] 允 选择器和扩展之间的空格[例如： pre ：hover ：extend （div pre ）] 允 多个扩展[例如： pre ：hover ：extend （div pre ）：extend （.bucket tr ）或 pre ：hover ：extend （div pre ，.bucket tr ） ] 扩展必须在选择器的末尾定义。 pre ：hover ：extend （div pre ）.nth- child （odd ）类型不允 。 例⼦ 下⾯的例⼦演⽰了在LESS⽂件中使⽤extension连接到选择器： extend_syntax.htm !doctype html head link rel=stylesheet href=style.css type=text/css / /head body div class=style h2Welcome to W3 school/h2 div class=container pHello!!!!!/p /div /div /body /html 接下来，创建⽂件 style .less style.less .style, .container:extend(.img){ background: #BF70A5; } .img{ font-size: 45px; font-style: italic; } 您可以使⽤以下命令将 style .less ⽂件编译为 style .css ： lessc style.less style.css 接下来执⾏上⾯的命令，它将⽤下⾯的代码⾃动创建 style .css ⽂件： style.css .style { background: #BF70A5; } .container, .style { font-style: italic; } .img, .style { font-size: 45px; } 输出 让我们执⾏以下步骤，看看上⾯的代码如何⼯作： 将上述html代码保存在 extend_syntax.htm ⽂件中。 在浏览器中打开此HTML⽂件，将显⽰如下输出。 W3Cschool （ ）最⼤的技术知识分享与学习平台 此 内容来⾃于 ⽹站⽤户上传并发布。