Sencha Touch：選定的列表樣式無效

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;

不要在標書和x-item-seleced之間添加空格，因為它們位於同一級別，而名稱和描述位於標書div中