2013-05-17 2 views
1

를 선택CSS 선택기 그룹은이 같은 네 가지 요소가

현재 내가 이렇게 내 CSS 선택을 할
<div class="hover-border top"></div> 
<div class="hover-border right"></div> 
<div class="hover-border bottom"></div> 
<div class="hover-border left"></div> 

:

div.hover-border.right, div.hover-border.left { 
    attribute: value 
} 

div.hover-border.top, div.hover-border.bottom { 
    attribute: value 
} 

이 그룹에 선택 할 CSS 선택기를 사용하여 거기다 한 반은? 나는 첫 번째 클래스 속성 "호버 국경이"일치해야합니다 곳, 뭔가를 할 수 있으며, 다음 괄호 안에 다음의 클래스 중 하나에 일치시킬 수 있습니다 :

div.hover-border.(right, left) { 
    attribute: value 
} 

div.hover-border.(top, bottom) { 
    attribute: value 
} 

감사를 도와. 대단히 감사합니다!

답변

3

지금까지 내가 아는 한,이 작업을 수행하는 표준 방법은 다음과 같습니다

div.hover-border { 
    attribute: value 
} 

div.hover-border.top, div.hover-border.bottom { 
    attribute: value 
} 

두 번째 규칙의 특이성은 '기본'첫 번째 규칙을

+0

예. 나는 이미 그렇게하고있다 :-) SASS 또는 LESS를 사용하지 않고 그것을 할 수있는 다른 방법이있을 것이라고 기대했다. 감사하지만 어쨌든 :-) – fischer

0

div.hover 국경을 무시 .left

이것은 선택기를 사용하는 올바른 방법이 아닙니다. "body.class"와 "body .class"에는 큰 차이가 있습니다.

이 문서를 참조하십시오 : - SASS 또는 적어도 덜 http://css-tricks.com/whats-the-difference/

질문에 대한,이 그룹 선택기를 사용하는 방법입니다. 하지만 다음 일련의 문제가 있습니다.

0

SASS, LESS 등의 CSS 프레임 워크를 사용하는 것이 좋습니다. Emmet. 그것들은 믹서 셀렉터에 좋다.