这篇文章主要为大家详细介绍了less中如何使用混合选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>test</title><styletype="text/less">/*less的混合使用情景一:直接使用在一个选择器中引用另一个选择器(class和id),从而把样式引用过去。*/.myh3{color:blue;}#block1{.myh3}#block2{.myh3}/*情景二:我们可以把被引入的选择器(class和id)作为规则使用,只要在选择器名后加入括号。*/#myblock(){position:absolute;background-color:yellow;}#block1{#myblock}#block2{left:300px;#myblock}/*情景三:带参数使用混合选择器。*///默认为100#myblock2(@size:100px){width:@size}#block1{#myblock2}#block2{#myblock2(200px)}</style></head><body><h3class="myh3">h3</h3><divid="block1">block1</div><divid="block2">block2</div><scripttype="text/javascript"src="js/es5-shim.js"></script><scripttype="text/javascript"src="js/less.min.js"></script><scripttype="text/javascript">less.watch();</script></body>

</html>

以上就是less中如何使用混合选择器的具体操作,代码应该是足够清楚的,相信这个例子可能是我们日常工作可能会见得到的。通过这篇文章,希望你能收获更多。