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>