CSS3 Negation (NOT) 셀렉터 살펴보기

이 기사는 "HTML5 / CSS3 자습서 시리즈" - 당신을 더 나은 디자이너 및 / 또는 개발자로 만드는 데 전념하는. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

CSS에는 다음과 같은 특정 조건에서 요소를 선택할 수있는 선택기가 있습니다. : 마우스 오버, :초점, :유효한, 그러나 오늘 우리는 그 선택자들을 다루지 않을 것입니다. 우리는 여전히 조금 알려진 방법이지만 대부분의 웹 디자이너가 사용하는 것을 조사 할 것입니다. :아니 선택기 또는 부정 선택기라고도합니다..

그것은 무엇을 하는가??

나는 :아니 이름 자체는 이미 그 기능을 설명하고있다. 지정된 요소 또는 조건의 반대. 예 :

이 구문은 다른 요소를 선택합니다. 피 (절).

 : 아닙니다 (p)

아래 예제 구문은 div 요소 아니 반이있다 알파벳

 div : not (.abc)

자, 이제 실제 예제에서이 선택기를 사용해 보겠습니다.

먼저 Wikipedia의 몇 개의 링크와 허구의 도메인과의 몇 개의 링크로 몇 단락을 만들어 보겠습니다. 다음은 단락의 HTML 마크 업입니다..

CSS : 선택기 데모가 아닙니다.
대추 참깨 참깨는 chupa chups를 스냅합니다 초콜릿 케이크. 귀리 케이크 marshmallow wypas 토피 도넛 케이크. Chupa chups 젤리 컵 케잌 gummi 곰. 레몬은 케이크 웨이퍼를 떨어 뜨린다..
초콜릿 케이크 도넛 치즈 케이크 젤리 달콤한 롤 가루 soufflÃ ?? ?? 초콜릿 케이크. Wypas 솜사탕 레몬 쿠키 사탕 도넛 bonbon 마 지 판을 삭제합니다. 마카롱 캔디 리코리스 젤리 - 오. 초콜릿 파이 달콤한 롤 사탕 마시멜로 dragÃ © Â ?? Ã'Â © e 솜 사탕 브라 우니 마시맬로.
푸딩 토핑 마시맬로 곰 발톱. 파이 머핀 패스트리 gummies 맛있게 먹는 브라 우니 젤리 진저 브레드 참깨. 사탕 푸딩 컵 케 잌은 곰 발톱. 당근 케이크 머핀 솜 사탕 tootsie 롤 머핀입니다. 젤리 콩 타트 dragÃ ?? Â ?? 웨이퍼 토핑 초콜릿 바. 달콤한 롤 토피 설탕 매실 과자 dragÃ ?? Â ?? Â © © 전자 봉봉 사탕 머핀.
케이크 marzipan applicake 생과자 wypas 과일 케이크. 귀리 케이크 초콜릿 wypas dragÃ ?? Â ?? Â © © 설탕 매화 당근 케이크 장식. 캐 러 멜 초콜릿 바 크로 상 웨이퍼 먹고 파이 jujubes 초콜릿 바. 건빵 사탕 지팡이 dragÃ ¢ â, ¬Â © e.Candy 브라우니 오트 케이크 참깨는 치즈 케이크 가루 tossie 롤 비스킷 곰 발톱을 스냅. SoufflÃ ?? Â ?? © gummi 젤리 콩 곰 참기름 faworki 맺는다 쿠키 디저트 달콤한 봉봉.

이 계획은 위키피디아를 가리 키지 않는 링크 만 선택하고 그 링크에 느낌표를 붙여 해당 링크에주의를 환기시킵니다.

먼저, :후 모든 링크에서 의사 요소를 사용하여 마크를 배치하고이를 인라인 블록 요소.

 a : after (display : 인라인 블록;

그런 다음 Wikipedia를 가리키고 있지 않은 모든 링크를 선택하기 위해 :아니 속성 선택기가있는 selector입니다. 여기서 속성 선택자는 href 속성이 시작되는 모든 앵커 태그를 선택합니다 http://en.wikipedia.org/ 그것을 :아니, 그것은 분명히 반대를 선택할 것입니다. 그래서 여기에 우리가 간다.

 a : not ([href ^ = "http://en.wikipedia.org/"]) : after background-color : # F8EEBD; 국경 : 1 픽셀 고체 # EEC56D; border-radius : 3px 3px 3px 3px; color : # B0811E; 내용 : "!"; 글꼴 크기 : 10pt; margin-left : 5px; 패딩 : 1px 6px; 위치 : 상대적;

그것은 작동합니다! Wikipedia를 가리 키지 않는 앵커 태그에는 이제 느낌표가 있습니다..

크롬 버그

Chrome에서 이것을 보면 렌더링 된 효과가 위와 같지 않음을 알 수 있습니다. URL에 관계없이 모든 링크에 느낌표가 표시됩니다..

이 경우는 실제로 버그로 처리되었습니다. 따라서이 버그를 수정하려면이 규칙을 추가해야합니다..

 a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display : 인라인 블록;

이제 문제가 해결되었을 것입니다..

데모

결론

경우에 따라 :아니 selector는 실제로 위의 예처럼 불필요한 클래스를 추가하지 않고 임의의 요소를 선택하거나 문서에 추가 마크 업을 추가 할 수있는 가장 효과적인 옵션입니다.

이 셀렉터를 사용하여 더 큰 효과를 낼 수 있습니다. CSS3의 필터 기능