我怎樣才能得到這個CSS規則工作？

我只是寫了一個自舉列的頁面，但我的一個類不工作：我怎樣才能得到這個CSS規則工作？

.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

    .icon { 
    border:11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
}

這是我的html：

<section class="serviceDetails"> 
     <div class="row"> 
     <div class="col-md-3 col-xs-12"> 
        <div class="col-md-2 hidden-xs icon"> 
        <i class="fa fa-bandcamp" aria-hidden="true"></i> 
     </div> 
....

出於某種原因，.icon類不起作用？這裏更多的信息：codepen

來源

2016-11-09 bier hier

這是因爲它嵌套在'.serviceDetails {}'裏面。 –

@DanielD抱歉，我在css中忘記了一些東西。 –

您是否使用像Less或Sass這樣的css preprocesser並編譯爲css？如果沒有，那麼它將無法工作。 Css不會讓你像這樣嵌套規則。 –

以你的CSS嵌套外面做你需要什麼，

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    }

http://codepen.io/anon/pen/dOYgaV

編輯：添加顏色和填充邊境上codepen也改變了預處理器設置。

.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 

}

預編譯上面寫的青菜也將解決這些問題，http://www.sassmeister.com/ - 在線編譯 http://sass-lang.com/ - 青菜文檔

這是由於正常的CSS不允許你裏面嵌套類規則的類，其中sass確實支持嵌套，還有很多其他很酷的功能。

來源

2016-11-09 23:18:37

我剛試過，圖標上沒有邊框？ –

你已經添加了一個尺寸來填充，但沒有顏色或在CSS中輸入:-) –

@JonSG真的，我只是回答「我該如何做這項工作」:-)更新答案。 –

我怎樣才能得到這個CSS規則工作？

回答

相關問題