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

回答

相关问题