我想知道是否有可能只有在定義了css變量的情況下才應用CSS規則。我發現可以定義一個默認值，比如:

background-color: var(--bgColor, red);

但是我不認為這會在我的項目中起作用，因為我想要的是，當變量沒有被定義來獲得它將具有的樣式，如果CSS中沒有那一行的話。

我加了一支筆，以便更容易理解我在說什么:

https://codepen.io/xmorelll/pen/bGWLoaL

.container {
  margin: 5px;
}
.content {
  padding: 5px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: var(--bgColor) !important;
}

<div class="container">
  <div class="content" style="background-color: blue">blue</div>
</div>

<div class="container">
  <div class="content" style="background-color: yellow">yellow</div>
</div>

<div class="container" style="--bgColor: red">
  <div class="content" style="background-color: green">red</div>
</div>

<div class="container">
  <div class="content" style="--bgColor: green">green</div>
</div>

因為我想要的是，當變量沒有被定義來獲得樣式，如果CSS中沒有那一行的話。

即使使用無效的值，這也是不可能的。

從規格來看

如果聲明包含引用帶有初始值的自定義屬性的var()，或者使用有效的自定義屬性，但屬性值在替換其var()函數后無效，則聲明在計算值時無效。發生這種情況時，屬性的計算值要么是屬性的繼承值，要么是其初始值，具體取決于屬性是否被繼承

和

如果一個屬性包含一個或多個var()函數，并且這些函數在語法上是有效的，那么在解析時必須假設整個屬性的語法是有效的。在var()函數被替換后，只在計算值時進行語法檢查。

因此，使用css變量的任何屬性無論其內容如何都是有效的。它僅在計算時無效，并且將退回到inherit或initi al(永遠不會退回到在其他地方指定的另一個值)

參見下面的例子。

html {
   background:red;
   background:lol-gradient(var(--c), super-power-red-color);
}

如果你不知道css屬性的前一個值是多少，你就要改變它，這樣你就沒有辦法回到它。 在這種情況下，如果對你來說可能的話，我推薦設置變量的地方也添加一個類，只有當變量存在時你才會使用它。

您不能在變量中設置默認值， 您可以為默認值和變量值定義相同的關鍵字

:root {
  --bg: pink;
}

div {
  background-color: red;  /*Default value*/
  background-color: var(--bg);
}

<div> 123</div>