Less学习笔记7：嵌套规则

最新推荐文章于 2022-09-30 19:53:46 发布

wujiayucn

最新推荐文章于 2022-09-30 19:53:46 发布

阅读量432

点赞数

分类专栏： # LESS

本文链接：https://blog.csdn.net/wjyyhhxit/article/details/84321991

版权

LESS 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

嵌套规则

现有一个列表如下：

<ul class="list">
    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>

    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>

    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>

    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>

    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>

    <li>
        <a href="#">这里是一个进行测试的文字</a>
        <span>2018-11-21</span>
    </li>
</ul>

在正常情况下：

.list{}         //是一个样式
.list li{}      //是一个样式
.list a{}       //是一个样式
.list span{}    //是一个样式

如果用嵌套来写：

.list{
    width: 600px;
    margin:  30px auto;
    padding: 0;
    list-style: none;
    li{
        height: 30px;
        line-height: 30px;
        background-color: #ccc;
        margin-bottom: 5px;
    }
    a{
        float: left;
    }
    span{
        float: right;
    }
}

此时想要a标签左浮动，这个时候是将其放在li中呢？还是和li平级放在list中呢？

1.将a标签的样式放在li中，通过编译生成的CSS为：

.list li a {}

2.将a标签放在与li平级的list中，通过编译生成的CSS为：

.list a{}

第一种方式相比较第二种，CSS的匹配次数多。尽量的让其少去嵌套。

所以将a放在了与li平级

最后编译生成的CSS为：

.list{
    width: 600px;
    margin:  30px auto;
    padding: 0;
    list-style: none;
}
.list li{
    height: 30px;
    line-height: 30px;
    background-color: #ccc;
    margin-bottom: 5px;
}
.list a{
    float: left;
}
.list span{
    float: right;
}

要给a的hover加样式：
在正常情况下：

.list a{}
.list a:hover{}

用嵌套的方式来写：

.list{
    width: 600px;
    margin:  30px auto;
    padding: 0;
    list-style: none;
    li{
        height: 30px;
        line-height: 30px;
        background-color: #ccc;
        margin-bottom: 5px;
    }
    a{
        float: left;
        &:hover{
            color:red;
        };
    }
    span{
        float: right;
    }
}