html - 选择器 :root in css

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 预处理器。