如何只为一个元素保留 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);
}

申请class

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

控制器class

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

Answer 1

您必须将样式 class 添加到您的 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：

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

您使用的 ID 与您在 css 文件中使用的一样：

#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!

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

How to keep css style for only one element

css

listview

javafx-8