CSS 선택기에서 특정 클래스 이름을 제외하는 방법은 무엇입니까?

CSS 선택기에서 특정 클래스 이름을 제외하는 방법은 무엇입니까?

---

사용자 마우스가 클래스 이름이 인 요소를 킬 때 배경색을 가리려고합니다 "reMode_hover".

가하지 만 나는 요소 개 색상을 변경하지 않고도 계명 있다"reMode_selected"

참고 : 환경에서 작업하기 때문에 자바 펼쳐가 아닌 CSS 만 사용할 수 있습니다.

더하기 위해 내 목표는 호버에서 첫 번째 요소의 색상을 지정하지만 두 번째 요소는 색칠하지 않는 것입니다.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

첫 번째 정의가 작동하기를 바라고 아래에서 시도합니다. 내가 뭘 잘못하고 있죠?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

---

한 가지 방법은 다중 클래스 선택기를 사용하는 것입니다 (자손 선택기 공백이 없음).

.reMode_selected.reMode_hover:hover 
{
    background-color: transparent;
}

http://jsfiddle.net/geatR/

다른 하나는 :not()선택기 를 사용하는 것입니다

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

http://jsfiddle.net/geatR/1/

---

최신 브라우저에서는 다음을 수행 할 수 있습니다.

.reMode_hover:not(.reMode_selected):hover{}

이름 정보는 http://caniuse.com/css-sel3 을 참조하십시오 .

---

방법 1

문제의 코드 .remode_hover는의 자손 인을 선택한다는을 구석으로 입니다 .remode_selected. 코드가 작동하도록하는 첫 번째 부분은 해당 공간을 제거하는 것입니다.

.reMode_selected.reMode_hover:hover

그런 다음 스타일이 작동하지 않을 경우 한 스타일을 재정의해야합니다 :hover. 즉, background-color재산 에 반박해야 합니다. 따라서 최종 코드는

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

깡깡이

방법 2

다른 방법은 :not()다른 사람이 한대로 를 사용 하는 것입니다. 괄호 안에 클래스 또는 속성이 명시되지 않은 모든 요소를 ​​반환합니다. 이 경우 .remode_selected거기에 넣을 것입니다. 클래스가없는 모든 요소를 ​​대상으로합니다..remode_selected

깡깡이

그러나 CSS3에 도입 되었기 때문에 권장하지 않습니다. 브라우저 지원은 그렇습니다.

방법 3

세 번째 방법은 jQuery를 사용하는 것입니다. CSS에서 .not()사용 :not()하는 것과 비슷 하지만 더 나은 브라우저 지원을 제공 하는 선택기 를 사용할 수 있습니다.

깡깡이

참고 URL : https://stackoverflow.com/questions/16201948/how-to-exclude-particular-class-name-in-css-selector