Question

我的应用程序中有这种CSS样式：

.list-cell {
    -fx-background-color: null;
    -fx-font-size: 24px;
    -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
}
.list-cell:hover {
    -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
}

我将它应用到我的程序中：

scene.getStylesheets().add(getClass().getResource("/com/root/tomaszm/Design.css").toExternalForm());

我想将此样式仅用于一个ListView节点，而不是任何其他节点。我有问题，新的ComboBox继承了这种风格。

我知道那可能是基本的东西，但我还不熟悉CSS，只是想快速修复......

编辑：

@CHARSET "UTF-8";

#mainList .list-cell {
    -fx-background-color: null;
    -fx-font-size: 24px;
    -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
}
#mainList .list-cell:hover {
    -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
}

申请类

scene.getStylesheets().add(getClass().getResource("/com/root/tomaszm/Design.css").toExternalForm());

控制器类

listView.getStyleClass().add("mainList");

Answer 1

您必须将样式类添加到ListView

   listView.getStyleClass().add("mylist");

你的css

 #mylist   .list-cell {
        -fx-background-color: null;
        -fx-font-size: 24px;
        -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
    }
  #mylist   .list-cell:hover {
        -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
    }

您可以阅读文档以获取更多解释http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

Answer 2

您编写css的方式，您需要将css id设置为您的节点而不是控制器中的styleclass。

<强>背景

一个节点可以同时拥有

styleclass （由.styleclass {...}表示）
css id （由#id {...}表示）

来自JavaDocs：

Node类包含id，styleClass和样式变量用于从CSS设置此节点的样式。 id和styleClass变量在CSS样式表中用于标识样式应该包含的节点适用。样式变量包含样式属性和值直接应用于此节点。

<强>差分

getStyleClass().add("mainList")设置节点的styleClass，并通过声明来在css文件中使用：

.mainList {
   ...
}

为了向节点声明一个id（让我们举例），你应该使用：

listView.setId("mainList");

您使用已在css文件中使用的ID：

#mainlist{
    ...
}

styleclass通常以一组相同类型的节点为目标 css id针对特定节点（但不是强制性的）

注意： 请勿混淆id和fx:id。两者都用于不同的实现。 For more information, click me!

如何只为一个元素保留css样式

2 个答案: