CSS 특이성에 대한 초보자 가이드

CSS 규칙을 재정의하려고 시도했지만 제대로 작동하지 않는 것을 발견한 적이 있습니까? 또는 하나의 요소가 다른 CSS 선택기 조합으로 여러 번 타겟팅될 때 한 번에 하나의 규칙만 적용되는 것을 알았습니까? 이것은 모두 CSS 특정 규칙 때문입니다.

CSS 특정 규칙은 특히 초보자에게 이해하기 가장 혼란스러운 개념 중 하나일 수 있습니다.

CSS를 이제 막 시작했다면 표준 주문 규칙으로 최신 CSS 규칙이 이전 규칙보다 우선해야 한다고 생각할 수 있습니다. 간단해 보이지만 항상 그렇게 되는 것은 아닙니다. CSS 특성, 언제, 어떤 CSS 규칙을 적용해야 하는지에 따라 다릅니다.

이제 CSS 특이성이 무엇이며 이를 효율적으로 사용하는 방법을 분석해 보겠습니다.

CSS의 특이성이란 무엇입니까?

간단히 말해, 하나의 요소에 대해 여러 CSS 선택기가 있는 경우 특정 값이 더 높은 것이 적용됩니다.

다른 선택자는 다른 가중치를 가지며 브라우저는 해당 요소와 가장 관련성이 높은 선택자를 결정합니다.

어떻게 작동합니까?

선택자의 특이성은 다음 네 가지 수준으로 분류할 수 있습니다.

1. 인라인 스타일 또는 CSS
2. ID
3. 클래스, 의사 클래스 및 속성
4. 요소 또는 의사 요소

CSS가 HTML 문서에 직접 적용되는 인라인 스타일 또는 CSS는 <p> 와 같습니다. 인라인 스타일은 항상 가장 높은 특이성 수준을 갖습니다.

이 순서에서 두 번째는 #content 와 같은 ID 입니다. 따라서 ID를 사용하는 선택자는 두 번째로 높은 특이성 수준을 갖습니다.

Classes , pseudo-classes 및 속성은 이 순서에서 세 번째입니다. 그것들은 각각 .post , :hover 및 [title] 처럼 보입니다.

요소와 의사 요소는 가장 작은 값을 갖습니다. li 및 :after 요소 및 의사 요소의 기본 예입니다.

계산

특이성 값은 다음 지침에 따라 계산할 수 있습니다.

• 인라인 스타일 또는 CSS: 1,0,0,0
• ID: 0,1,0,0
• 클래스 또는 의사 클래스 및 속성: 0,0,1,0
• 요소 및 의사 요소: 0,0,0,1
• 범용 선택기(*): 0

선택기의 특이성 수준을 확인하려면 특이성 계산기를 사용할 수 있습니다.

CSS 특이성의 기본 규칙

이제 특이성이 어떻게 구성되어 있는지 이해했으므로 몇 가지 일반적인 규칙과 예를 살펴보겠습니다!

이것은 내 예제에서 사용할 기본 HTML입니다. 여기에 #content 있는 컨테이너 내에 작은 목록이 있습니다.

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

규칙 1

한 요소에 대해 동일한 선택자가 두 개 이상 있는 경우 모두 동일한 특이성 값을 가지므로 낮은 값이나 마지막 값이 적용됩니다.

다음 CSS 스니펫에서는 두 선택기의 특이성이 동일하므로 li 색상이 노란색이 됩니다.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

규칙 2

하나의 요소에 여러 셀렉터가 사용될 경우 특정 값이 높은 셀렉터가 적용됩니다.

다음 예제에서 li 두 개의 서로 다른 선택기의 대상이 되며 둘 다 글꼴 색상에 영향을 줍니다. 그렇다면 어떤 규정을 적용해야 할까요?

이전 인스턴스와 마찬가지로 CSS 순서 개념에서 두 번째 것이 적용되어야 하지만(따라서 li 색상은 녹색이 됨) .list li ul li 보다 특정성 값이 높기 때문에 색상은 빨간색으로 유지됩니다.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

규칙 3

특정 수준에서 클래스가 요소보다 중요한 것을 보았습니다. 이제 ID에서 어떤 일이 발생하는지 살펴보겠습니다.

다음 예제에는 동일한 요소를 대상으로 하고 글꼴 색상에 영향을 주는 클래스와 ID가 있습니다. 다시 같은 질문: 어떤 규칙을 적용해야 합니까?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

앞서 언급했듯이 ID는 클래스, 속성, 요소보다 특이도 값이 높으므로 색상은 파란색이 됩니다. 더 높은 특이성 수준을 위해 항상 대상 ID 입니다.

규칙 4

!important 특정성 값의 선택자를 재정의합니다. 그러나 !important CSS 모범 사례로 간주되지 않으므로 남용해서는 안 됩니다.

CSS 작성자이고 기존 규칙을 재정의하지 않는 경우 !important 사용할 필요가 거의 없습니다.

!important 다른 사람의 CSS를 재정의하려고 하고 특정성이 이전 선택기를 능가할 수 없는 경우, 특히 HTML에서 CSS의 배치 순서를 제어할 수 없는 경우에만 사용하십시오.

이것은 WordPress에서 작업하는 동안 주로 발생하며, 다른 플러그인과 테마에 의해 이미 추가된 많은 CSS 파일을 찾을 수 있습니다.

일반적으로 플러그인 CSS는 플러그인에 따라 다르며 CSS 충돌을 피하기 위해 ID, 인라인 CSS 또는 더 높은 특이성을 위해 !important 사용합니다. 해당 CSS를 재정의하려면 더 높은 특이성을 사용해야 합니다. 이러한 시나리오에서는 !important 사용할 수 있습니다.

다음 예에서는 다른 CSS 선택기를 대상으로 하는 li 사용하여 이전 시나리오를 다시 만들고 있지만 !important 모든 규칙을 재정의하고 색상이 노란색임을 알 수 있습니다.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important 특정 수준 이상으로 CSS를 적용할 수 있는 권한을 제공합니다.

이 규칙을 재정의할 수 없으므로 !important 사용하는 동안 주의해야 합니다. !important 재정의하는 유일한 방법은 나중에 CSS에서 다른 !important 사용하는 것이므로 CSS의 힘을 이해하지 못하는 경우 CSS가 쉽게 지저분해 보일 수 있습니다.

몇 가지 예외

요소와 의사 요소는 특이성이 가장 낮지만 몇 가지 흥미로운(약간 혼란스러운!) 예외가 있습니다. (방금 본 규칙을 따르지 않는 것 같아서 혼란스럽습니다.)

이 예에서는 :first-child (의사 클래스) 및 :first-line(의사 요소)이 표시됩니다. 우리는 의사 클래스가 의사 요소보다 특이성이 높다는 것을 방금 배웠습니다. 따라서 단락의 첫 번째 줄 색상은 녹색이어야 하지만 대신 분홍색이 됩니다.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

여기서 순서가 문제가 될 것이라고 생각할 수 있지만 순서를 전환해도 출력이 변경되지는 않습니다. 특이도 계산기는 결과와 다른 그림을 보여줍니다.

이것은 특이성이 약간 혼란스러워지는 곳입니다. 이 결과의 이유는 :first-line 요소에 더 가깝고 아마도 인라인 스타일로 취급되기 때문이라고 가정할 수 있습니다. 다른 예는 jsfiddle을 확인할 수 있습니다.

특이성을 효율적으로 사용하는 방법은 무엇입니까?

CSS 특정 규칙을 이해하면 이를 매우 효율적으로 사용하고 CSS를 재사용할 수 있게 만들 수 있습니다.

동일한 .button 사용하지만 다른 배경색을 사용하고 싶다고 가정해 보겠습니다. 따라서 특정 선택기( .red-block .button 를 설정합니다.

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

.button .red-block 컨테이너에 래핑된 경우 기본 버튼 배경색이 빨간색으로 변경됩니다.

CSS 특이성은 테마 작성자의 CSS를 자신의 것으로 재정의하려는 WordPress 테마를 사용자 정의할 때 매우 유용합니다.

피해야 할 일반적인 실수

어떤 사람들은 매우 특정한 선택자를 사용하는데 이는 좋은 습관이 아닙니다. 필요한 만큼만 구체적으로 작성하십시오. 예를 들어 이 코드 스니펫은 li 를 대상으로 하지만 너무 구체적입니다.

 [css] div#content ul.list li{ color: purple; } [/css]

CSS를 너무 구체적으로 지정하면 경직되고 재사용하기 어려워집니다. div#content ul.list li 대신 .list li 쉽게 작성할 수 있습니다. 이렇게 하면 CSS가 더 깔끔해집니다.

추가 리소스

• 특이성에 대한 W3 조직
• CSS 특이성 계산기
• IE 버그
• IE 해킹

결론

보시다시피 CSS 특정성은 중요한 도구이며 모든 프런트 엔드 개발자는 툴킷에 이를 포함해야 합니다. 이 개념을 명확하게 이해하면 훌륭한 프런트 엔드 개발자가 되는 데 큰 도움이 될 수 있습니다.