Firefox忽略CSS逗號分隔的類

我有關於逗號分隔的CSS類的奇怪問題。火狐忽略了下面的類.Control-fakeSelect::after： - See result Firefox忽略CSS逗號分隔的類

.Control-field::-webkit-calendar-picker-indicator, 
.Control-fakeSelect::after{ 
    background-color: transparent; /* 1 */ 
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23444%22%3E%3Cpath%20d%3D%22M11.773.583L7.38%204.976%202.987.583C2.432.028%201.532.028.977.583c-.555.555-.555%201.455%200%202.01L6.374%207.99c.28.278.642.417%201.006.417.09%200%20.182-.01.27-.026.27-.05.526-.18.734-.39l5.4-5.397c.554-.555.554-1.455%200-2.01-.556-.555-1.456-.555-2.01%200z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 
    background-position: center right; 
    background-repeat: no-repeat; 
    color: transparent; /* 1 */ 
    content: ""; 
    cursor: pointer; 
    height: 15px; 
    line-height: 15px; 
    margin-top: 2px; 
    opacity: 1; /* 1 */ 
    padding: 10px 0 10px 20px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 15px; 
}

但是，如果我從逗號分隔的列表中刪除.Control-field::-webkit-calendar-picker-indicator這樣的CSS是這樣的：

.Control-fakeSelect::after{ 
    background-color: transparent; /* 1 */ 
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23444%22%3E%3Cpath%20d%3D%22M11.773.583L7.38%204.976%202.987.583C2.432.028%201.532.028.977.583c-.555.555-.555%201.455%200%202.01L6.374%207.99c.28.278.642.417%201.006.417.09%200%20.182-.01.27-.026.27-.05.526-.18.734-.39l5.4-5.397c.554-.555.554-1.455%200-2.01-.556-.555-1.456-.555-2.01%200z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 
    background-position: center right; 
    background-repeat: no-repeat; 
    color: transparent; /* 1 */ 
    content: ""; 
    cursor: pointer; 
    height: 15px; 
    line-height: 15px; 
    margin-top: 2px; 
    opacity: 1; /* 1 */ 
    padding: 10px 0 10px 20px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 15px; 
}

火狐認識到CSS類。 See result。

之前有人遇到過這個問題，或者知道爲什麼Firefox忽略:: after添加到逗號分隔的css類之後？

來源

2016-01-20 henrik123

此行爲是正確的和有意的。您的選擇是：

.Control-field::-webkit-calendar-picker-indicator, 
.Control-fakeSelect::after

火狐不能（也不會）解析第一個，因爲它是特定的供應商，它認爲整個規則原子無效的，因爲它不知道如何充分應用它。 IE和Edge也會這樣做。

所以，你的看法是錯誤的，它不涉及到:after或逗號，它涉及到-webkit前綴，這是故意和規格正確的行爲。將規則拆分爲2，它會正常工作。

來源

2016-01-20 10:18:39

感謝@ niels-keurentjes，我不知道那個瀏覽器忽略它，因爲它是供應商特定的。太糟糕了，但重複的CSS雖然：p – henrik123

幾年前，我發現了這種困難的方式，但它實際上是很好的行爲，當你潛入它:) –

Firefox忽略CSS逗號分隔的類

回答

相關問題