巢狀規則

現有一個列表如下：

<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;
    }
}

& 這個符號代表上一層的選擇器