재단 CSS 선택

내가 재단 (5) 사용과 CSS 선택에 대한 몇 가지 문제가있어 : 내가 정확히 내가 원하는 것을 선택할 수없는, 이상한 :재단 CSS 선택

이 상위 바이며, 나는 배경 - 변경 희망 "활성 오른쪽 버튼"의 색상 : CSS 파일에서

<nav class="top-bar" data-topbar> 
    <ul class="title-area"> 
    <li class="name"> 
     <h1><a href="#">My Site</a></h1> 
    </li> 
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
    </ul> 

    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="active"><a href="#">Right Button Active</a></li> 
     <li class="has-dropdown"> 
     <a href="#">Right Button Dropdown</a> 
     <ul class="dropdown"> 
      <li><a href="#">First link in dropdown</a></li> 
     </ul> 
     </li> 
    </ul> 

    <!-- Left Nav Section --> 
    <ul class="left"> 
     <li><a href="#">Left Nav Button</a></li> 
    </ul> 
    </section> 
</nav>

, 나는이 쓴 :

.active a { 
      background-color: red; 
}

그것은 작동하지 않습니다, 나는 해봤를

.top-bar-section ul.right li.active a

그리고 아무 것도 없습니다. 유효한 하나만

.top-bar-section li.active:not(.has-form) a:not(.button)

입니다. 이해할 수 없습니다. 누구든지 CSS Selector에 대한 도움을 줄 수 있습니까? 고맙습니다!

출처

2014-03-31 web rocker

당신의 선택은 좋은 것 같다. http://jsfiddle.net/BuA76/ – Shomz

@Shomz Foundation CSS를 사용하기 때문에 문제가 발견되었습니다.이 하나의 remplace 광산입니다. 그것은 내가 여러 CSS 정의 충돌을 배울 필요가 보인다. –

나는 당신이 다른 모든 것들을 다 써 버렸을 때 CSS를 적재해야한다. 그리고 적어도 그들의 엄격한 규칙들 - 예를 들어,'# id'는 요소 '

'의'.class'보다 더 높은 우선 순위를 갖는다. ...'.parent .class'는'.class' 등보다 엄격합니다. – Shomz

선택기가 괜찮아 보입니다. http://jsfiddle.net/BuA76/

뭔가가 규칙을 재정의하고 있습니다.

당신이 모든 다른 후 CSS를로드 확인하고, 확인도 그들의이 같은 규칙 적어도 엄격한 것을 - 예를 들어, #id이 요소 <div id='id' class='class'></div>에 .class보다 더 높은 우선 순위를 가지고 .parent .class이 ... 단지보다 엄격한입니다 .class, 등등 ...

다음은 규칙 우선 순위/ specificity을 계산하기위한 좋은 도구입니다 : http://specificity.keegan.st/

출처

2014-03-31 09:31:29 Shomz

그건 놀라운 도구, 감사 수백만 !! –

Foundation 5 기본 CSS 파일은 광산을 다시 배치하므로 내가 선택한대로 조작 할 수 있습니다. 재단이 사용하는 전체 선택 자나 ID로 문제를 해결할 수 있습니다. 긴 selector를 입력하는 것은 짜증나기도합니다.

출처

2014-03-31 09:27:40

재단 CSS 선택

답변

관련 문제