如何在JavaFX中设置ListView中自定义控件的样式

我创建了一个自定义控件，扩展了

HBox:

FXML

<fx:root alignment="CENTER_LEFT" prefHeight="80" prefWidth="400.0" spacing="5" styleClass="email-view"
         stylesheets="stylesheet.css" type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx/8.0.112"
         xmlns:fx="http://javafx.com/fxml/1">
    <Region fx:id="unreadIndicator" prefWidth="5.0"/>
    <Label fx:id="senderAvatar" prefHeight="40.0" prefWidth="40.0" styleClass="sender-image-small"/>
    <Region prefWidth="10"/>
    <VBox prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
        <Region prefHeight="10"/>
        <HBox>
            <Label fx:id="fromLabel" styleClass="from-label">Anindya Chatterjee</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <Label fx:id="dateLabel" styleClass="date-label">31st Dec 1999</Label>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="subjectLabel" styleClass="subject-label">Test Mail Subject</Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="attachmentLabel" styleClass="attachment-label">
                <Image requestedHeight="15" requestedWidth="15" url="@attach.svg"/>
            </ImageView>
            <Region prefWidth="5"/>
        </HBox>
        <Region prefHeight="5"/>
        <HBox>
            <Label fx:id="contentLabel" styleClass="content-label" maxWidth="400">
                Here is some text for test mail just to check how does
                it look on mock ups. The final value will change
            </Label>
            <Region HBox.hgrow="ALWAYS"/>
            <ImageView fx:id="favoriteLabel" styleClass="favorite-label">
                <Image requestedHeight="15" requestedWidth="15" url="@favorite.svg"/>
            </ImageView>
            <Region minWidth="5"/>
        </HBox>
    </VBox>
</fx:root>

我将控件用作列表视图项。我对css属性进行了更改，以更改选择栏的颜色，如下所示

.list-view, .list-view:focused, .list-view:selected {
    -fx-control-inner-background: transparent;
    -fx-control-inner-background-alt: -fx-control-inner-background;
    -fx-background-color: transparent;
    -fx-padding: 0;
    -fx-fit-to-width: true;
    -fx-effect: null;
    -fx-selection-bar: transparent;
    -fx-selection-bar-non-focused: transparent;
}

.list-view .list-cell:filled:selected:focused, .list-view .list-cell:filled:selected {
    -fx-background-color: transparent;
    -fx-effect: null;
}

.list-view .list-cell:filled:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

.email-view {
    -fx-background-color: -color-quinary;
    -fx-effect: dropshadow(three-pass-box, -color-text-inverted, 4, 0, 0, 1);
}

现在，我想在列表视图中选择自定义控件时更改其背景色。我试图达到的效果或多或少是这样的

---

任何指针如何更好地使用css实现此效果？

理论上，这组选择器的作用是：

// Color of the list-cell selected + unselected: transparent
.list-view .list-cell,
.list-view .list-cell:filled,
.list-view .list-cell:selected,
.list-view .list-cell:focused,
 .list-view .list-cell:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

// Color of the custom control hover
.list-view .list-cell:hover .email-view {
    -fx-background-color: greenyellow;
}

// Color of the custom control selected
.list-view .list-cell:filled:selected:focused .email-view,
.list-view .list-cell:filled:selected .email-view {
    -fx-background-color: green;
}

// Color of the custom control unselected
.email-view { -fx-background-color: gray; }

---

目标是使

列表单元格始终透明，并根据
列表单元格的伪状态设置
电子邮件视图的背景色。也许我忘记了一些状态，但这可能是一个很好的起点。
很高兴听到这个消息！我不能尝试它们，所以如果你有一些修正是完整的，请让我知道：事实上，第一组和最后一组做了把戏，剩下的2组中间不是我需要的。啊，是的，很可能是因为<代码>。电子邮件视图< /C> >被直接指定，并且<代码>列表单元格< /代码>在任何状态下都是透明的。我会相应地更新。
// Color of the list-cell selected + unselected: transparent
.list-view .list-cell,
.list-view .list-cell:filled,
.list-view .list-cell:selected,
.list-view .list-cell:focused,
 .list-view .list-cell:hover {
    -fx-background-color: transparent;
    -fx-effect: null;
}

// Color of the custom control hover
.list-view .list-cell:hover .email-view {
    -fx-background-color: greenyellow;
}

// Color of the custom control selected
.list-view .list-cell:filled:selected:focused .email-view,
.list-view .list-cell:filled:selected .email-view {
    -fx-background-color: green;
}

// Color of the custom control unselected
.email-view { -fx-background-color: gray; }