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项目之间添加空格，因为它们位于同一级别，而名称和描述位于投标div内

Sencha Touch：选择的列表样式不起作用

1 个答案: