css - Sencha 触摸 : selected list styling doesn't work

Question

这可能是一个非常简单的问题，但出于某种原因，我无法在我的代码中找到问题。我有一个 Sencha Touch 应用程序。我在特定列表类定义中定义了一个 itemCls:

xtype: 'list',
store: 'Tenders',
itemCls: 'tenders',
onItemDisclosure: false,
itemTpl: [
    '<div class="name">{name}</div>',
            '<div class="description">{description}</div>'
].join(''),

然后我有一些自定义 CSS 定义，我试图在其中自定义此特定列表(不是应用程序中的所有列表):

.tenders {
    padding: 0.7em 0.7em;
}

.tenders .name {
    padding: 0em 1.5em 0em 0em;
    font-size: large;
    font-weight: bold;
}

.tenders .description {
    font-size: small;
    font-weight: light;
    padding: 0em 0em 0em 0em;
}

.tenders .x-item-selected {
    background-color: green;
}

但是选择的元素不是绿色的。我可以在 Chrome 调试器中看到以下类附加到列表中的所选元素:

<div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl tenders x-list-item-relative x-item-selected" id="ext-simplelistitem-211" style="min-height: 50px !important;">
  <div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-436" style="display: none !important;"></div>
  <div class="x-innerhtml" id="ext-element-563">
    <div class="name">Name</div>
    <div class="description">Description</div>
  </div>
</div>

我还可以看到正在应用 .tenders { padding: 0.7em 0.7em } 样式，但没有应用 .tenders .x-item-selected。

知道我做错了什么吗？

Answer 1

使用:

.tenders.x-item-selected {
    background-color: green;
}

使您的代码比标准 Sencha css 使用完整路径更重要

.tenders.x-list-item.x-item-selected.x-list-item-tpl

或

background-color:green!important;

不要在 tenders 和 x-item-selected 之间添加空格，因为它们在同一级别，而 name 和 description 在 tenders div 中