我有一个关于逗号分隔 css 类的奇怪问题。 Firefox 会忽略以下类 .Control-fakeSelect::after: - See result
.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;
}
Firefox 可以识别 css 类。 See result。
有人遇到过这个问题或者知道为什么 Firefox 在添加到逗号分隔的 css 类时会忽略::after 吗？
最佳答案
这种行为是正确且有意的。您的选择器是:
.Control-field::-webkit-calendar-picker-indicator,
.Control-fakeSelect::after
由于 Firefox 无法(不会)解析第一个规则，因为它是特定于供应商的，因此它认为整个规则原子无效，因为它不知道如何完全应用它。 IE 和 Edge 也会这样做。
所以你的观察是错误的，它与 :after 或逗号无关，它与 -webkit 前缀相关，并且它是有意的并且按照规范正确的行为。将规则分成 2 部分，这样就可以正常工作。
关于css - Firefox 忽略 CSS 逗号分隔的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34897085/