less （五）父级选择 &

最新推荐文章于 2024-01-16 17:38:46 发布

原创最新推荐文章于 2024-01-16 17:38:46 发布 · 7.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#less

less 专栏收录该内容

8 篇文章

订阅专栏

这个是什么意思呢，我们来看例子：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="sty.css">
    </head>
    <body>
        <div>
           <a href="#">父级选择 & </a>
        </div>
    </body>
</html>

上面是一个html页面，我们给其添加css 样式如下：

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

上面的超链接部分颜色是橘黄色，并且添加了hover改变样式；

我们同样的样式使用 less:

div{
    width:500px; 
    height:500px; 
    border:1px solid red;
    a{
        color:orange;
        &:hover{
            color:red;
        }
    }
}