jQuery UI 아코디언 스타일을 CSS가 아닌 CSS로 덮어 쓰려고 시도했습니다.

Question

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

이 어떤 도움을 크게 감상 할 수있다!

Answer 1

주석에 입력 한 링크를 기준으로 요소를 호출하는 순서는 약간 벗어났습니다.

이 작업을 진행 아래의 스타일을 사용

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