如何保持CSS样式只有一个元素 [英] How to keep css style for only one element

问题描述

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

  .LIST细胞{
    -fx背景色：空;
    -fx-字体大小：24px的;
    -fx文本填写：线性梯度（0.0％0.0％0.0％50.0％，反映，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细胞：悬停{
    -fx文本填写：线性梯度（0.0％0.0％至100.0％100.0％，反映，RGB（255,255,255）0.0，RGB（255,255,77）100.0）;
}
 

和我把它应用到我的程序：

<$p$p><$c$c>scene.getStylesheets().add(getClass().getResource(\"/com/root/tomaszm/Design.css\").toExternalForm());

和我想用这种风格只为一个节点的ListView没有任何其他。我有一个新的ComboBox继承了这种风格的问题。

我知道那可能是基本的东西但是我还不熟悉CSS，只是在寻找快速解决...

编辑：

  @CHARSETUTF-8;#mainList .LIST细胞{
    -fx背景色：空;
    -fx-字体大小：24px的;
    -fx文本填写：线性梯度（0.0％0.0％0.0％50.0％，反映，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细胞：悬停{
    -fx文本填写：线性梯度（0.0％0.0％至100.0％100.0％，反映，RGB（255,255,255）0.0，RGB（255,255,77）100.0）;
}
 

应用程序类

<$p$p><$c$c>scene.getStylesheets().add(getClass().getResource(\"/com/root/tomaszm/Design.css\").toExternalForm());

控制器类

  listView.getStyleClass（）加（mainList）;
 

解决方案

你写你的CSS的方式，你需要在 CSS ID 设置为您的节点，而不是一个的styleClass 在您的控制器。

背景

一个节点可以同时拥有

• 的styleClass的（重由 .styleclass psented $ P $ {...} ）的


• CSS ID的（重由 #ID psented $ P $ {...} ）的

从JavaDoc中：

  

节点类包含的ID，的styleClass和样式变量，这些变量
  在造型从CSS这个节点使用。 ID和变量的styleClass
  在CSS样式表是用来识别哪些样式应该节点
  被应用。风格变量包含样式属性和值
  被直接应用于该节点

区别

getStyleClass（）。添加（mainList）设置的styleClass 的一个节点，并在使用通过声明CSS文件：

  .mainList {
   ...
}
 

有关声明一个ID到节点（可以把你的例子），你应该使用：

  listView.setId（mainList）;
 

您使用id因为你已经在CSS文件中使用：

  #mainlist {
    ...
}
 

  

A 的styleClass 通常针对一组相同类型的节点，其中作为中
   CSS ID 针对一个特定的节点（但不是强制）

注意： 不要混淆 ID 和 FX：ID 。两者都用于不同的和有不同的实现。 <一href=\"http://stackoverflow.com/questions/23686325/whats-the-difference-between-fxid-and-id-in-javafx\">For更多信息，请点击我！

I have this CSS style in my application:

.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);
}

And I apply it to my program:

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

And I would like to use this style only for one ListView node not for any other. I have problem that new ComboBox inherit this style.

I know thats probably basic thing but Im not yet familiar with CSS, and just looking for quick fix...

EDIT:

@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);
}

Application class

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

controller class

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

解决方案

The way you have written your css, you need to set the css id to your node and not a styleclass in your controller.

Background

A node can have both

• styleclass (represented by .styleclass {...} )
• css id (represented by #id {...} )

From the 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.

Difference

getStyleClass().add("mainList") sets the styleClass of a node and is used in the css file by declaring :

.mainList {
   ...
}

For declaring an id to a node (lets taking your example), you should use :

listView.setId("mainList");

You use the id as you have already used in the css file:

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

Note : Do not confuse id and fx:id. Both are used for differently and have different implementations. For more information, click me!

这篇关于如何保持CSS样式只有一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！