CSS에서 () 의사 클래스가 아닌 것은 무엇입니까?

CSS에서 () 의사 클래스가 아닌 것은 무엇입니까?

:not() 선택에서 특정 요소를 제외 할 수있는 기능적 표기법입니다. 괄호 안에 주어진 선택기를 부정하여보다 구체적인 선택기를 만드는 데 사용됩니다. 예를 들어, p:not(.special) "특별한"클래스를 가진 요소를 제외한 모든 <p></p> 요소를 선택합니다.

다음 :not() 의사 클래스의 구문은 :not(selector) , selector 는 유형 선택기, 클래스 선택기, ID 선택기 또는 의사 클래스와 같은 간단한 선택기가 될 수 있습니다 (그러나 다른 부정 의사 클래스 또는 의사 요법은 아님). :not() 의사 클래스는 CSS3 사양의 일부이며 최신 브라우저에서 널리 지원됩니다.

CSS 선택기를 향상시키기 위해 : NOT () 의사 클래스를 사용하려면 어떻게해야합니까?

사용 :not() 의사 클래스 사용은 여러 가지 방법으로 CSS 선택기의 정밀성과 유지 가능성을 크게 향상시킬 수 있습니다.

1. 특이성 감소 : 요소를 제외하면 선택기를 덜 구체적으로 유지하여 캐스케이드를 유지하고 특이성 전쟁을 피하는 데 도움이 될 수 있습니다. 예를 들어, .container .content p.special "특별"클래스를 사용하는 모든 P 요소를 제외한 모든 p 요소를 대상으로하기 위해 p:not(.special) 사용할 수 있습니다.
2. 선택기 단순화 : :not() 의사 클래스는보다 간결한 CSS를 작성하는 데 도움이 될 수 있습니다. 예를 들어, 스타일 요소에 별도의 규칙을 다르게 작성하는 대신 하나의 선택기로 결합 할 수 있습니다. 예를 들어, button:not([disabled]) 비활성화 된 버튼을 제외한 모든 버튼을 대상으로합니다.
3. 가독성 향상 : 사용 :not() CSS를 읽는 다른 개발자에게 의도를 더 명확하게 할 수 있습니다. nav ul:not(.dropdown) 과 같은 선택기는 클래스 "드롭 다운"을 제외한 내비게이션 막대에서 모든 비정규 목록을 스타일링하고 있음을 분명히 나타냅니다.
4. 성능 향상 : 경우에 따라 :not() 사용하면 브라우저의 구현에 따라 다르지만 스타일이 필요없는 요소를 신속하게 제외하여 브라우저가 렌더링을 최적화하는 데 도움이 될 수 있습니다.

웹 디자인에서 () 의사 클래스가 아닌 일반적인 사용 사례는 무엇입니까?

:not() 의사 클래스는 다재다능하며 웹 디자인에서 몇 가지 일반적인 사용 사례가 있습니다.

1. 대화식 요소 제외 : 대화식 요소를 제외한 모든 요소에 스타일을 적용 할 수 있습니다. 예를 들어, *:not(button):not(input):not(select) 양식 컨트롤을 제외한 모든 요소를 ​​스타일링하는 데 사용할 수 있습니다.
2. 반응 형 디자인 : 반응 형 디자인에서는 특정 화면 크기를 제외한 요소에 스타일을 적용 할 수 있습니다. 예를 들어, @media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } } 768px보다 작은 화면에서 "모바일 친화적 인"클래스를 제외한 모든 div 요소를 숨 깁니다.
3. 스타일링 텍스트 요소 : 종종 특정 컨테이너 내의 텍스트 요소를 제외한 모든 텍스트 요소에 텍스트 스타일을 적용하려고합니다. 예를 들어, body *:not(h1):not(h2):not(h3) { font-size: 16px; } 제목을 제외한 신체 내부의 모든 요소에 대해 글꼴 크기를 16px로 설정합니다.
4. 스타일 재설정 : :not() 의사 클래스는 스타일을 재설정하는 데 유용 할 수 있습니다. 예를 들어, input:not([type="submit"]):not([type="button"]) { border: none; } 제출 및 버튼 유형을 제외한 모든 입력에서 경계를 제거합니다.

: NOT () 의사 클래스를 다른 선택기와 결합 할 수 있습니까? 그렇다면 어떻게해야합니까?

예, :not() 의사 클래스는 다른 선택기와 결합하여보다 복잡하고 정확한 규칙을 만들 수 있습니다. 다음은이를 결합하는 몇 가지 방법입니다.

1. 다른 선택기와의 체인 : :not() 선택기와 함께 선택을 개선 할 수 있습니다. 예를 들어, ul li:not(:first-child):not(:last-child) 첫 번째 및 마지막 요소를 제외한 모든 li 요소를 ul 에서 선택합니다.
2. 의사 클래스와 결합 : :not() 의사 클래스는 다음과 같은 다른 의사 클래스와 결합 할 수 있습니다 :hover , :focus 또는 :checked . 예를 들어, button:not(:disabled):hover 호버링 될 때 비활성화되지 않은 버튼에 스타일을 적용합니다.
3. Attribute Selector와 함께 사용 : 속성을 기반으로 요소를 제외하기 위해 속성 선택기와 :not() 사용할 수 있습니다. 예를 들어, a:not([href^="mailto:"]) "mailto :"로 시작하는 href 속성이있는 것을 제외한 모든 앵커 요소를 선택합니다.
4. 다른 선택기 내에서 중첩 : :not() 의사 클래스는 다른 선택기 내에 중첩 될 수 있습니다. 예를 들어, .container > *:not(.special) > p "특별한"클래스를 제외하고 .container 내부의 모든 요소의 직접적인 자녀 인 모든 p 요소를 선택합니다.

:not() 다른 선택기와 결합하면 웹 디자인의 스타일과 성능을 향상시키는 고도로 타겟팅되고 효율적인 CSS 규칙을 만들 수 있습니다.

위 내용은 CSS에서 () 의사 클래스가 아닌 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!