當父母身份爲ID時，CSS規則不起作用

以下代碼當我使用id屬性作爲父母margin-bottom未得到應用，而當我將其用作父母class時，它起作用，是否覆蓋或優先事項？當父母身份爲ID時，CSS規則不起作用

.prof { 
    margin: 10px 0 0; 
    .parent & { 
    margin: 15px 0 0; 
    position: relative; 
    } 

.js-prof, 
.js-prof-layout { 
    .prof { 
    margin-bottom: 10px; 
    } 
}

margin-bottom: 10px不與父母工作作爲id：

.prof { 
    margin: 10px 0 0; 
    #parent & { 
    margin: 15px 0 0; 
    position: relative; 
    } 

.js-prof, 
.js-prof-layout { 
    .prof { 
    margin-bottom: 10px; 
    } 
}

請注意，這是完全一樣的頁面

margin-bottom: 10px當父被用作class工作但唯一的區別是添加父母作爲id不工作，同時將其添加爲class作品！任何解釋？謝謝

來源

2016-03-07 sisimh

你將需要演示這個。 –

您的CSS規則正按預期工作 - 它們不會被破壞。你應該閱讀[CSS特定性]（https://css-tricks.com/specifics-on-css-specificity/） – chazsolo

我們需要看到你的HTML也使用這些類，否則我們不能幫你。 – TylerH

假設缺少}只是一個錯字，它確實是一個特定的問題，因爲你認爲。

翻譯的CSS外觀的有關部分如下

.parent .prof { 
    margin: 15px 0 0; 
    position: relative; 
} 
.js-prof-layout .prof { 
    margin-bottom: 10px; 
}

在這裏你可以看到，對於prof元素頂部規則有兩類的選擇，而底部治也有兩類。所以底層規則具有相同的特性，因此覆蓋頂層規則（如後面的樣式表中所示）。

但是，如果將.parent替換爲#parent，則頂層規則具有一個ID和一個類，因此具有更高的特異性，所以底層規則不會覆蓋它。

一種可能的解決方案是在最高規則中不分配margin-bottom，即只寫margin-top而不是margin速記。
或者用更完整的選擇器編寫新的樣式規則，例如#parent .js-prof-layout .prof。（這個取決於HTML的結構。）

來源

2016-03-07 22:37:50

當父母身份爲ID時，CSS規則不起作用

回答

相關問題