<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初见LESS</title> <style type="text/css"> .conten ul{ list-style: none; } .conten li{ height: 25px; line-height: 25px; padding-left: 15px; background: url("arr.jpg") no-repeat center left; } .conten li a{ text-decoration: none; color: #535353; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } /*less的写法如下*/ //只会在LESS中显示 /*就会在LESS和CSS中显示*/ @charset "UTF-8" .conten { ul{ list-style: none; } li{ height: 25px; line-height: 25px; padding-left: 15px; background: url("arr.jpg") no-repeat center left; a{ //不会继承父的样式，css反映了html标签的父子关系 text-decoration: none; color: #535353; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } } } </style> </head> <body> <div class="conten"> <ul> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初见LESS</title> <link rel="stylesheet/less" href="style.less"/> <script src="less.min.js"></script> </head> <body> <div class="conten"> <ul> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> <li><a href="">这是测试文档</a></li> </ul> </div> </body> </html>