css - ExtJS:添加 CSS

Question

我是网络方面的新手，对如何处理 CSS 感到困惑。 (值得庆幸的是)到目前为止，在使用 ExtJS4 时几乎没有对 HTML/CSS 的直接操作……所以现在我需要更改 CSS，但我遇到了问题。

具体来说，我正在尝试动态更改 Accordion 标题背景的颜色。

Javascript:

    afterrender: function(subForm) {
        subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
        // this works - so I know it's the right element.
        subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
    }

CSS:

// attempt 1
.custom-accordion-hd-valid {
background: green;
}

// attempt 2
.custom-accordion-hd-valid .x-accordion-hd {
background: green;
}

所以:

• 通过 setStyle 设置样式确实有效，但我无法轻易删除样式
• 使用 CSS 通过 addCls 设置 attempt 1 加载 CSS，但它被 .x-accordion-item 覆盖
• 通过 addCls 设置 CSS attempt 2 加载 CSS 失败

帮忙吗？

Answer 1

例如，如果您想删除您在此处设置的背景样式:

subForm.getHeader().getEl().setStyle('背景', 'hsl(100, 60%, 60%)');

css 将允许您通过再次设置它来简单地覆盖它，例如:

subForm.getHeader().getEl().setStyle('background', 'none');

或

subForm.getHeader().getEl().setStyle('背景', '蓝色');

css 在提供多种样式时如何判断哪些样式最“重要”具有特别的优先级 - take a look here at this great article on css specificity

并通过使用 setStyle() 方法意识到您正在将“内联”样式应用于这些元素，而文件或 style html 标记中的其他 css 定义具有较低的优先级