SCSS嵌套問題

-1

我想在一個div內部設計一個H3和一個p標籤。SCSS嵌套問題

我有這個代碼塊（未定型p標籤） -

.marketing-single-page-titles{ 
h3 { 
    margin: 0; 
    padding: 0; 
p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
}}}

而且該塊（即造型p標籤） -

.marketing-single-page-titles p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
}

是否有一個原因對於第一個塊中的p標籤，樣式將被忽略？

來源

2017-01-01 sk03

更新：我把p標籤的樣式放在h3樣式的上面，現在它起作用了......這是什麼原因造成的？ – sk03

這是因爲'p'沒有嵌套在任何'h3'內 – Dummy

爲什麼要在標題元素中放置一個'p'？一段文字是一個或另一個，不是？ – 1252748

正確格式化你的代碼將顯示該p應嵌套在h3

顯示在下面的代碼格式正確，凸顯您的問題：

.marketing-single-page-titles { 
    h3 { 
    margin: 0; 
    padding: 0; 

    p { 
     margin: 0; 
     padding: 0; 
     position: relative; 
     top: -5px; 
     color: $marketing-blue; 
     font-weight: bold; 
    } 
    } 
}

應該如何（注意關閉花括號的位置）：

.marketing-single-page-titles { 
    h3 { 
    margin: 0; 
    padding: 0; 
    } 

    p { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: -5px; 
    color: $marketing-blue; 
    font-weight: bold; 
    } 
}

來源

2017-01-01 21:39:18 seemly

謝謝。我忽略了括號。我感謝您的幫助！ – sk03

沒問題。樂意效勞。請記住如果它解決了您的問題，請接受答案。 – seemly

第一個塊只有在p位於h3 標籤;是這樣的：

<h3>My nice title with a <p> paragrahp inside</p></h3>

你的段落擔憂初始規則轉化爲

.marketing單頁標題H3 p {.....

這就是爲什麼。

來源

2017-01-01 21:43:39

回答

相關問題