less （四）嵌套

cvper

于 2018-04-21 11:55:35 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： less 嵌套

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80025693

vue 专栏收录该内容

22 篇文章

订阅专栏

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="sty.css">
    </head>
    <body>
        <div>
            <p>
                <a href="#">less 嵌套</a>
            </p>
        </div>
    </body>
</html>

给出上面的结构，我们在css中一般是这样写样式：

div{width:500px; height:500px; border:1px solid red;}
div p{width:300px; height:300px; border:1px solid green;}
div p a{color:orange;}

但是在less 中，我们可以嵌套样式，如下：

div{
    width:500px; 
    height:500px; 
    border:1px solid red;
    p{
        width:300px; 
        height:300px; 
        border:1px solid green;
        a{
            color:orange;
        }
    }
}