CSS 선택기 : 특이성

다음 발췌문은 Tiffany B. Brown이 쓴 "CSS Master"라는 책에서 발췌 한 것입니다. 이 책은 전 세계 상점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

CSS 특이성은 궁극적으로 요소에 적용되는 스타일 선언을 결정합니다. 와일드 카드 선택기 (*)는 특이성이 가장 낮고 ID 선택기는 가장 높은 특이성을 갖습니다. 후손 선택기 (예 : P IMG) 및 하위 선택기 (예 : Panel & Gt; H2)는 유형 선택기 (예 : P, IMG 또는 H1)보다 더 구체적입니다.

언뜻보기에 정확한 특이성 값을 계산하는 것은 까다로워 보입니다. 선택기 레벨 3에 언급 된 바와 같이, 당신은 다음과 같이 필요합니다 :

통계 선택기의 ID 선택기 수를 통계 (= a)

통계 선택기의 클래스 선택기, 속성 선택기 및 의사 클래스의 수를 통계 (= b) 통계 선택기의 유형 선택기 및 의사 요소의 수 (= C) 와일드 카드 선택기를 무시하십시오

그런 다음이 A, B 및 C 값을 결합하여 최종 특이 적 값을 형성합니다. 예를 들어, ID 선택기 #foo의 특이성은 1,0,0입니다. 속성 선택기 (예 : [type = email]) 및 클래스 선택기 (예 : chart)의 특이성은 0,1,0입니다. 의사 클래스를 추가하면 (예 : 1 차 자녀, 예를 들어. 그러나 간단한 유형 또는 요소 선택기 (예 : H1 또는 P)를 사용하면 특이성이 0,0,1 만됩니다.

참고 : 특이성을 계산하십시오 Keegan Street의 특이성 계산기와 Joshua Peek의 CSS는 선택기 특이성을 배우고 계산하는 데 도움이됩니다.
• 물론 복잡한 선택기와 결합 된 선택기는 더 높은 특이성 값을 생성합니다. 예를 살펴 보겠습니다. 다음 CSS를 고려하십시오
이 두 규칙 세트는 비슷하지만 동일하지는 않습니다. 첫 번째 선택기 UL#Story-List & Gt에는 유형 선택기 (UL), ID 선택기 (#스토리리스트) 및 클래스 선택기 (.BookReview)가 포함됩니다. 특이성 값은 1,1,1입니다. 두 번째 선택기 #Story-List & gt에는 ID 선택기와 클래스 선택기 만 포함됩니다. 특이성 값은 1,1,0입니다. 우리의 #스토리리스트 & gt; .
• 링크 또는 : 유효하지 않은 경우 클래스 선택기와 같은 수준의 특이성을 갖습니다. a : 링크 및 A.external의 특이성 값은 모두 0,1,1입니다. 마찬가지로, :: 이전 및 :: 이후와 같은 의사 요소는 유형 또는 요소 선택기와 마찬가지로 구체적입니다. 두 셀렉터의 특이성이 동일하면 캐스케이드가 적용됩니다. 예는 다음과 같습니다.
이 CSS를 적용하면 .external 클래스를 적용하는 링크를 제외한 모든 링크가 슬레이트 파란색이됩니다. 이 링크는 주황색으로 변경됩니다.
• 특이성이 낮은 상태를 유지하면 선택기 확산, 즉 선택기 특이성 및 길이가 시간이 지남에 따라 증가하는 경향을 방지하는 데 도움이됩니다. 일반적으로 새로운 개발자를 팀에 추가하거나 웹 사이트에 새로운 콘텐츠 양식을 추가 할 때 발생합니다. 선택기의 확산은 또한 장기 유지 보수 어려움으로 이어질 수 있습니다. 보다 구체적인 선택기를 사용하여 다른 규칙 세트를 덮어 쓰거나 코드를 리팩터링해야합니다. 선택기가 길수록 CSS 파일의 무게도 증가합니다.

  우리는 2 장에서 특이성을 낮게 유지하기위한 전략에 대해 논의합니다.

  결론 이 장을 읽은 후 CSS 선택기를 잘 이해해야합니다. 구체적으로, 당신은 다음과 같은 방법을 알아야합니다

  선택기를 사용하여 특정 요소, 의사 요소 및 의사 클래스에 CSS를 적용하십시오. 의사 요소와 의사 클래스의 차이를 이해하십시오

  선택기 레벨 3 및 4 사양에 도입 된 최신 의사 클래스 사용

  계산 특이성

  다음 장에서는 유지 관리 가능하고 확장 가능한 CSS를 작성하기위한 황금 규칙 중 일부를 소개합니다.

  CSS 선택기 및 특이성 (FAQ)에 대한 자주 질문을 자주 묻습니다 웹 개발에서 CSS 특이성의 중요성은 무엇입니까?
  CSS 특이성은 브라우저가 적용되는 CSS를 결정하기 때문에 웹 개발의 핵심 개념입니다. 여러 CSS 규칙을 요소에 적용 할 수있는 경우 브라우저는 특정 규칙을 따라 사용할 규칙을 결정합니다. CSS 특이성을 이해하면 개발자가보다 효율적이고 효율적인 CSS 코드를 작성하고 불필요한 재정의를 피하며 CSS 문제를보다 효과적으로 문제 해결하는 데 도움이 될 수 있습니다.
  • CSS 특이성을 계산하는 방법은 무엇입니까?
  CSS 특이성 계산은 CSS 규칙에 사용되는 다양한 유형의 선택기를 기반으로합니다. 각 유형의 선택기는 다른 특이성 값을 갖습니다. 인라인 스타일은 가장 높은 특이성을 가지며 ID 선택기, 클래스 선택기, 속성 선택기 및 의사 클래스가 이어지고 최종적으로 선택기와 의사 요소를 입력합니다. CSS 규칙의 특이성은 선택기 별 값의 합입니다.
  • 예제와 함께 CSS 특이성의 개념을 설명 할 수 있습니까?
  예를 고려해 봅시다. 클래스 선택기 .class1과 ID 선택기 #ID1이있는 다른 규칙이있는 CSS 규칙이 있다고 가정합니다. 이 두 규칙이 동일한 요소에 적용될 수있는 경우 ID 선택기가 클래스 선택기보다 특이성이 높기 때문에 ID 선택기가있는 규칙이 적용됩니다.
  • 두 CSS 규칙이 같은 특이성을 갖는 경우 어떻게됩니까?
  두 CSS 규칙이 동일한 특이성을 갖는 경우 CSS 코드에 나타나는 마지막 규칙이 적용됩니다. 이는 CSS가 같은 특이성을 가진 규칙을 다룰 때 "마지막 규칙 승리"전략을 따를 수 있기 때문입니다.
  • CSS 특이성을 다루는 방법은 무엇입니까?
  CSS 규칙의 특이성을 높이면 CSS 특이성을 무시할 수 있습니다. 이는 규칙에보다 구체적인 선택기를 추가하여 수행 할 수 있습니다. CSS 특이성을 무시하는 또 다른 방법은! 중요한 규칙을 사용하는 것입니다. 그러나 CSS 코드를 관리하고 디버그하기가 더 어려워 지므로 가능할 때마다 중요한 것을 피해야합니다.
  CSS 특이성에서 상속의 역할은 무엇입니까?

  상속은 특정 유형의 속성이 부모 요소에서 자식 요소로 자동 전달되는 CSS의 기능입니다. 그러나 상속 스타일은 특이성이 가장 낮으며 요소에 적용되는 직접 스타일로 쉽게 덮어 쓸 수 있습니다.

  와일드 카드 선택기는 CSS 특이성에 어떤 영향을 미칩니 까?

  와일드 카드 선택기 (*)는 CSS 특이성에 영향을 미치지 않습니다. 이것은 특이성 값이 0,0,0,0임을 의미합니다. 따라서 동일한 규칙에 사용 된 다른 선택기는 와일드 카드 선택기를 무시합니다.

  CSS에서 의사 요소의 특이성은 무엇입니까?

  CSS에서 의사 요소의 특이성은 0,0,0,1입니다. 이는 유형 선택기 (예 : DIV, P 등)와 동일한 특이성을 가지고 있으며 클래스 선택기, ID 선택기 및 인라인 스타일에 의해 재정의된다는 것을 의미합니다.

  : NOT () 의사 클래스는 CSS 특이성에 어떤 영향을 미칩니 까?

  THE : CSS에서의 의사 클래스는 선택기 특이성을 증가시키지 않습니다. 대신, 특정 계산은 다음과 같은 매개 변수를 기반으로합니다. 예를 들어, : not (.class1)에서 특이성은 .class1과 동일합니다.

  단일 CSS 규칙에서 여러 선택기를 사용할 수 있습니까? 특이성에 어떤 영향을 미칩니 까?

  예, 단일 CSS 규칙에서 여러 선택기를 사용할 수 있습니다. 그러한 규칙의 특이성은 모든 선택기 특이성의 합입니다. 예를 들어, #id1.class1에서 특이성은 #id1 및 .class1 특이성의 합입니다.

위 내용은 CSS 선택기 : 특이성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!