스타일 ul and li

Question

정렬되지 않은 목록의 스타일을 지정하고 문제가 발생하면 출력에 영향을 미치지 않습니다!

예를 들어 변경할 수 없습니다.

<div id="footer"> 
    <div id="foot-nav"> 
     <ul> 
      <li><a href="">home</a></li> 
      <li><a href="">site map</a></li> 
      <li>three</li> 
     </ul> 
    </div> 
</div> 

CSS의 :

#footer #foot-nav ul.blah { 
    list-style-type: none; 
} 

#footer #foot-nav ul.blah li.blah { 
    padding:2px 0; 
} 

#footer #foot-nav ul.blah li.blah a { 
    color:#333; 
    text-decoration: none; 
} 

#footer #foot-nav ul.blah li.blah a:hover { 
    text-decoration: underline; 
} 

.mobile-menu #mobile-menu-links ul{ 
    list-style-type: none; 
    margin:0; 
    padding-left:3%; 
} 

.mobile-menu #mobile-menu-links ul li{ 
    padding-bottom:2px; 
    border-bottom:1px solid #bababa; 
} 

<div class="mobile-menu" id="mobile-account"> 
    <div id="mobile-menu-links"> 
     <h4>General:</h4> 
     <ul> 
      <li><a href="">View your profile</a></li> 
      <li><a href="">Change your settings</a></li> 
      <li><a href="">View your messages</a></li> 
     </ul> 
    </div> 
</div> 

# 모바일 메뉴 UL에서 규칙의 상단에서 UL과 선호도를 고려 동일한 페이지에서 다른 UL 문제?

나는 분명히 잘못된 것을하고 있습니다. 도와 주실 수 있습니까? 감사!

Answer 1

#footer #foot-nav ul.blah 

이 선택기 footer의 ID와 요소의 하위 foot-nav의 ID와 요소의 자손 인 blah 클래스를 가질 <ul> 요소에 적용된다.

마지막 부분을 제외하고는 HTML과 일치하므로 #foot-nav 요소가 footer ID의 요소 내에 없다고 가정합니다.

모든 선택자에서 #footer을 제거하거나 #foot-nav 요소를 footer ID의 요소 내에 넣을 수 있습니다.

편집 :

좋아, 질문에 대한 변화의 빛에 하나 전혀 적용하기, 또는 CSS를 오버라이드 (override)되고에서 정지되어있는 CSS에 문제가 있습니다.

웹 브라우저의 개발자 도구에서 요소를 검사하여 규칙이 전혀 나타나지 않는지 확인하십시오. 그럴 경우 페이지의 다른 규칙에 의해 무시 될 수 있습니다. 그렇다면 요소를 검사하는 동안 다른 규칙의 위치를 ​​볼 수 있어야합니다.

규칙이 전혀 적용되지 않으면 CSS에 문제가있는 것 같습니다. 구문 오류가 없는지 확인하기 위해 유효성 검사기를 통해 실행 했습니까? 미디어 쿼리 내의 규칙이 유효하지 않습니까?

Answer 2

http://jsfiddle.net/GgdhX/

당신은 LI 요소에 ID와 불필요한 클래스의 자손 선택기를 많이 사용하고 있습니다. 당신은 당신이 거기에있는 선택기의 모든 #footer 측면을 제거하면

#foot-nav .blah{ 
    list-style-type: none; 
} 

#foot-nav .blah li{ 
    padding:2px 0; 
} 

#foot-nav .blah li a{ 
    color:#333; 
    text-decoration: none; 
} 

#foot-nav .blah a:hover{ 
    text-decoration: underline; 
} 

<div id="foot-nav"> 
    <ul class="blah"> 
     <li><a href="">home</a></li> 
     <li><a href="">site map</a></li> 
     <li>three</li> 
    </ul> 
</div> 

Answer 3

, 모든 것이 완벽하게 작동합니다. 나는 jsfiddle of the working copy을 만들었다. 이것이 당신이 염두에두고있는 UI 개념인지 알려주십시오. 또한 CSS Specificity을 읽고 다른 중첩 요소에 규칙을 적용 할 때 규칙의 우선 순위를 이해하는 것이 좋습니다