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

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());

Controller 类

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

Answer 1

按照您编写 css 的方式，您需要将 css id 设置为您的节点，而不是 Controller 中的 styleclass。

背景

一个节点可以同时拥有两者

• styleclass (由 .styleclass {...} 表示)
• css id (由 #id {...} 表示)

来自 JavaDocs:

The Node class contains id, styleClass, and style variables that are used in styling this node from CSS. The id and styleClass variables are used in CSS style sheets to identify nodes to which styles should be applied. The style variable contains style properties and values that are applied directly to this node.

差异

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

.mainList {
   ...
}

要向节点声明 id(以您的示例为例)，您应该使用:

listView.setId("mainList");

您使用已在 css 文件中使用的 id:

#mainlist{
    ...
}

A styleclass normally targets a set of same type of nodes where as css id targets a particular node (but it is not mandatory)

注意: 不要混淆 id 和 fx:id。两者的用途不同，实现也不同。 For more information, click me!