：带有“ - ”属性的root css，它是如何工作的

Question

我遇到了一些css，详细介绍了一些颜色：root。我不明白如何使用它。我如何调用--pelorous颜色？

:root {
    --cerulean: #0571AE;
    --ivory: #FDFDFC;
    --regal-blue: #1A3852;
    --bondi-blue: #0082C3;
    --pelorous: #1E8FD0;
    --light-grey: #D5D4D4;
}

Answer 1

这将是格式，与var（）函数结合使用：

.myElement { color: var(--pelorous); }

更多信息here和here.

Answer 2

这些属性被称为CSS变量，当浏览器完全支持时，它们将提供一个解决方案，以避免在整个CSS文件中重复。

应在:root选择器内定义这些变量。

为了用变量替换属性值，您需要使用var() CSS函数。

SYNTAX

selector { property: var(custom-property-name, declaration-value) }

样本：

＆＃13;

＆＃13;

:root {
  --cerulean: #0571AE;
  --ivory: #FDFDFC;
  --regal-blue: #1A3852;
  --bondi-blue: #0082C3;
  --pelorous: #1E8FD0;
  --light-grey: #D5D4D4;
  --demo-height: 50vh;
}
body {
  margin: 0;
}
.container {
  display: flex;
  height: var(--demo-height);
}
div {
  flex: 0 0 10%;
  background-color: var(--light-grey);
}
div:nth-child(odd) {
  background-color: var(--regal-blue);
}
.container:nth-child(2) div {
  background-color: var(--pelorous);
}
.container:nth-child(2) div:nth-child(odd) {
  background-color: var(--bondi-blue);
}

＆＃13;

<section class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<section class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

＆＃13;

＆＃13;

＆＃13;

浏览器支持：

caniuse

更多信息：

Var() MDN

Using CSS variables

W3 CSS Custom Properties