试图用CSS覆盖jQuery UI手风琴风格，不工作

我想重写使用CSS的jQuery UI手风琴风格，但不管我尝试什么，我似乎无法得到它的工作。我使用图像作为我的“手风琴标题”而不是H3标记，但是，我仍然看到应用于手风琴的jQuery UI样式 - 它周围有一个圆形的灰色边框（我希望在标题周围没有边框或内容）试图用CSS覆盖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; 
}

任何帮助，将不胜感激！

来源

2014-07-17 Iconoclast

加载UI样式表之前，你的主样式表，否则UI将覆盖主样式表。 – kingkode

该页面上的任何元素都没有'noStyleAccordion'类。另一种强制样式的方式是在style：'outline：none！important;后面添加'！important';＃ – kingkode

@McMastermind哎呀，对不起，我还没有完全发布这个页面。你现在应该可以在页面上看到'noStyleAccordion'类。我还在'noStyleAccordion'类中为每个属性添加了'important;'但我仍然看到UI样式：/ – Iconoclast

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

使用下面的风格得到它的工作：

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

来源

2014-07-17 19:37:00 kingkode

完美地工作。非常感谢你的帮助！！ :) – Iconoclast

试图用CSS覆盖jQuery UI手风琴风格，不工作

回答

相关问题