Question

我正在使用：root选择器来简化我的CSS。这是我在css中使用它的方式：

:root {
 --bg-color: #00AEEF;
 --bg-color-transparent: rgba(255, 255, 255, 0.8);
 --text-color: #ffffff;
 --bg-color-hover: #008DF8;
 --text-color-hover: #ffffff;
 --border-color: 1px solid #00AEEF;
 --border-color-hover: #A0D6FF;
 --border-color-transparent: 2px solid rgba(0,174,239,0.2);
 --logout-footer-bg: #ffffff;
 --logout-footer-text: #00AEEF;
}

hr {
    border: 0;
    border-bottom: var(--bg-color) 1px solid;
    background: var(--bg-color);
}
table.login-view {
    /* Change the width to work with new changes */
    width: 25%;
    padding: 5px;
    background-color: #FFFFFF;
    border: var(--border-color);
    color: #000000;
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
table.error-message {
    background-color: #FFFFFF;
    border: var(--border-color);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10px;
    width: 600px;
}

这在Firefox中完美运行，但没有其他浏览器（移动和桌面）。我的问题是，有没有其他方法可以支持所有浏览器？如果没有，还有其他办法吗？

Answer 1

问题不在于:root选择器，主要浏览器的所有当前版本都支持该选择器。这是使用CSS变量，例如--bg-color，它们目前仅在Firefox中受支持。有关详细信息，请参阅this page。

如果你想在CSS中使用变量并支持Firefox以外的浏览器，你需要使用像Sass或LESS这样的CSS预处理器。

选择器：root in css

1 个答案: