특정 사례의 CSS 계층 구조

저는 Joomla!의 간단한 메뉴 모듈을 작성하고 있습니다! 그리고이 시점에서 나는 핵심 CSS 구조 (ataptable template이라고 부르 자)에서 가장 중요한 전역 CSS 선언을 재설정 할 작업을하고 있습니다.특정 사례의 CSS 계층 구조

<div id="main" role="main"> 
<div id="top"> 
    <div class="menu"> 
     <ul class="main-level"> 
      <li class="main-level"> 
       <a class="main-level" href="/joomla17/index.php/using-joomla">Using Joomla!</a> 
        <ul class="sub-level"> 
         <li class="sub-level"> 
          Menu Item 
         </li> 
        </ul> 
      </li> 
     </ul> 
    </div> 
</div>

그리고 CSS 파일 :

홈페이지 레이아웃 CSS 파일 (모듈에서 indepentent) :

/* PART OF MAIN LAYOUT FILE */   
    #main ul {  
list-style-position: outside; 
     list-style-type: square; 
     margin: 10px 0; 
     padding: 0 0 0 15px; 
    }

나는 다음과 같은 HTML 구조에서 CSS 계층 w 문제가 모듈 CSS 파일 (CSS 전역을 재설정해야하는 선언) :

/* MY MODULE CLASSES */ 
.mod_sjqmenu ul.sub-level { 
    border: 1px solid #666666; 
    display: block; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    text-align: left; 
    width: 100%; 
} 

.mod_sjqmenu ul { 
    cursor: pointer; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    z-index: 9999; 
}

어떤 이유에서든 내 모듈 선언은 여백 및 패딩 속성을 덮어 쓰지 않습니다 (다른 것들도 마찬가지입니다). 나는 혼란 스럽다. 왜? 제 생각에는 #main ul을 다스리고 마진과 패딩을 0으로 설정해야합니다. 계층 구조가 깊고 DOM 객체에 가깝기 때문입니다.

무엇이 누락 되었습니까? 아니면 실수가 어디 있습니까?

출처

2012-07-09 PiWo

나는 규칙이로드되는 그 순서 "생각"하지만 당신은 사용하여 대체 할 수 있습니다 당신은`

그래서 예를 들어 목록 스타일 위치를 원하는 경우 중요한

:! 외부 중요합니다;

list-style-type: square !important; 
    margin: 10px 0 !important; 
    padding: 0 0 0 15px !important; 
}`

출처

2012-07-09 10:34:37

고마워요! 그래서 명백한 -! important - 나 자신에 의해 아직도 이해할 수 없을 것입니다. 감사합니다 – PiWo

정확하고 유용한 답변으로 표시해 주시겠습니까? –

오케이, 여기에 글을 올리려면 신규 끝난! – PiWo

#main ul은 선호하는 id를 사용합니다. ID보다 낮은 클래스 만 사용합니다. CSS를 무시하려면

#main .mod_sjqmenu ul{}

을 쓸 수 있습니다.

출처

2012-07-09 10:43:15 32bitfloat

답변 해 주셔서 감사합니다. Unfortunaltelly 그것은 템플릿 독립성의 문제를 해결하지 않습니다 - #main과 같은 예측할 수없는 선택기에 의존하지 않고 UL CSS 속성을 모듈 CSS 내에서 재설정하고 싶습니다. 문안 인사 – PiWo

특정 사례의 CSS 계층 구조

답변

관련 문제