css - JavaFX:CSS 变量

Question

我有四个按钮，我想以相同的方式设计它们的样式，只是每个按钮都有一个独特的图像。共有三种样式，一种用于正常状态，另一种用于悬停和聚焦状态。在推荐的 CSS 中执行此操作需要大量重复，我在网上搜索过，似乎 CSS 不支持变量。那么有没有解决这个问题的方法，或者在代码中执行此操作会更务实。

Answer 1

正确使用 CSS 将避免重复。您可以通过以下几种方式之一在四个按钮之间共享代码。

让按钮共享一个类并为它们的差异设置样式:

<div id="btn1" class="button">Button 1</div>
<div id="btn2" class="button">Button 2</div>
<div id="btn3" class="button">Button 3</div>
<div id="btn4" class="button">Button 4</div>

<style>
    .button {
      color: blue;
      background: white;
      /* etc... */
    }

    #btn1 { background-image: url('uniqueimage1.png');
    #btn2 { background-image: url('uniqueimage2.png');
    /* etc... */
</style>

---

或者，不太优选...

在一个 CSS 规则中定位多个元素:

<div id="btn1">Button 1</div>
<div id="btn2">Button 2</div>
<div id="btn3">Button 3</div>
<div id="btn4">Button 4</div>

<style>
    #btn1, #btn2, #btn3, #btn4 {
      color: blue;
      background: white;
      /* etc... */
    }

    #btn1 { background-image: url('uniqueimage1.png');
    #btn2 { background-image: url('uniqueimage2.png');
    /* etc... */
</style>