试图用 CSS 覆盖 jQuery UI 手风琴样式，不工作答案

【问题标题】：Trying to override jQuery UI accordion styles with CSS, not working试图用 CSS 覆盖 jQuery UI 手风琴样式，不工作
【发布时间】：2014-07-17 17:26:04
【问题描述】：

我正在尝试使用 CSS 覆盖 jQuery UI 手风琴样式，但无论我尝试什么，我似乎都无法让它工作。我使用图像作为我的“手风琴标题”而不是 H3 标签，但是，我仍然看到 jQuery UI 样式被应用于手风琴 - 它周围有一个圆形的灰色边框（我希望标题周围没有边框或内容）

我不想完全删除 jQuery UI 样式，因为我有其他基于文本的手风琴，它们的样式看起来非常好。但我无法弄清楚我在此覆盖下做错了什么。

HTML：

<div class="collapsedAccordion noStyleAccordion">
<a href="#"><img src="img/complex.jpg" border="0" onmouseover="this.src='img/complex2.jpg'" onmouseout="this.src='img/complex.jpg'" /></a>
    <div>
        <p>ACCORDION 1 CONTENT</p>
    </div>
<a href="#"><img src="img/maps.jpg" border="0" onmouseover="this.src='img/maps2.jpg'" onmouseout="this.src='img/maps.jpg'" /></a>
    <div>
        <p>ACCORDION 2 CONTENT</p>
    </div>
</div>

JAVASCRIPT：

$(".collapsedAccordion").accordion({
            collapsible: true,
            autoHeight: false,
            heightStyle: "content",
            active: false
        });

CSS：

.noStyleAccordion .ui-accordion .ui-accordion-header .ui-accordion-content {
padding: none;
background: none;
border: none;
outline: none;
}

任何帮助将不胜感激！

【问题讨论】：

在主样式表之前加载 UI 样式表，否则 UI 将覆盖主样式表。
该页面上的任何元素上都没有 noStyleAccordion 类。强制样式的另一种方法是在样式后添加!important：outline: none !important;
@McMastermind 哎呀，对不起，我还没有完全发布页面。您现在应该能够在页面上看到 noStyleAccordion 类。我还在 noStyleAccordion 类中的每个属性中添加了 !important;，但我仍然看到 UI 样式：/
访问我的网站，这样我们就可以聊天而不是淹没 cmets：mcmastermind.com/chat

标签： css jquery-ui overriding accordion jquery-ui-accordion

【解决方案1】：

根据您在评论中提供的链接，您调用元素的顺序有点偏离。

使用下面的样式让它工作：

.noStyleAccordion .ui-accordion-header, .noStyleAccordion .ui-accordion-content {
     padding: 0;
     background: none;
     border: none;
     outline: none;
}

【讨论】：

完美运行。非常感谢你的帮助！！ :)