css - 试图用 CSS 覆盖 jQuery UI Accordion 样式，但不起作用

Question

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

我不想完全删除 jQuery UI 样式，因为我有其他基于文本的 Accordion 样式看起来非常好。但是我无法弄清楚我在这里使用此覆盖做错了什么。

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;
}

如有任何帮助，我们将不胜感激!

Answer 1

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

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

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