CSS 특이성

빠른 요약

이 기사에서는 CSS 특이성, 특이성 순위의 팁과 요령에 대해 배우고 CSS 특이성을 계산하는 방법도 배웁니다.

HTML 요소는 서로 다른 CSS 선택자를 일치시켜 여러 CSS 규칙을 첨부할 수 있습니다. 가장 높은 특이성 값을 가진 선택자가 "우승"하고 해당 스타일 선언이 해당 HTML 요소에 적용됩니다.

따라서 기본적으로 특이성은 요소와 가장 관련성이 높은 CSS 선언을 결정하기 위해 브라우저에서 사용하는 알고리즘이며, 이는 요소에 적용할 속성 값을 결정합니다.

예를 들어 봅시다

.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>

위에 작성된 코드에는 충돌하는 선언이 있습니다. 우리의 html 요소는 .title 클래스 및 h1 요소 선택자와 모두 일치합니다. 실제로 h1 요소이며 .title 클래스 이름도 있습니다. 각 선택기에는 다른background-color 속성이 있습니다. background-color 요소가 어떤 h1 속성을 갖게 될지 추측해 보세요.
h1 요소 선택자가 .title 클래스 선택자 뒤에 오기 때문에 빨간색이라고 말할 수 있습니다. 결과입니다


예, 녹색입니다. 클래스 선택자 규칙이 적용되었습니다. 이는 .title 클래스 선택자가 h1 요소 선택자보다 더 높은 특이성 순위를 갖기 때문입니다.

따라서 여러 규칙에서 CSS 속성이 충돌할 때마다 가장 구체적인 선택자가 있는 규칙이 선택됩니다.

특이성 순위

CSS 규칙의 특이성 순위는 다음과 같이 가장 구체적인 것부터 가장 덜 구체적인 것까지입니다.

인라인 스타일 - 예: <h1 style="color: pink;">

ID 선택기 - 예: #navbar

클래스 선택기.myClass, 속성 선택기[type="radio"] 및 의사 클래스:hover

요소 선택기div 및 의사 요소:before

특이성을 계산하는 방법?

다음은 선택자의 특이성 값입니다.

인라인 스타일의 특이성은 10000입니다

.

일치하는 각 ID 선택자에 대해 100을 더합니다.

일치하는 각 클래스 선택기, 속성 선택기 및 유사 클래스에 대해 10을 추가합니다.

일치하는 각 요소 선택기 및 의사 요소에 대해 1을 추가합니다.

예시

#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

첫 번째 선언에는 특이성 값이 100인 ID 선택기가 있습니다.

두 번째 선언에는 값이 1인 요소 선택자, 클래스 선택자 10, 속성 선택자 10이 포함됩니다. 10 + 10 + 1 = 21

세 번째 선언은 단순히 특이성 값이 10인 클래스 선택자입니다.

결과적으로 첫 번째 스타일 선언이 가장 높은 특이성 값인 100을 가지므로 첫 번째 스타일 선언이 적용됩니다.

참고: 인라인 스타일은 가장 높은 특이성을 가지며 항상 작성자의 스타일 시트에 있는 모든 스타일을 재정의합니다. 인라인 스타일을 재정의하는 유일한 방법은 중요함을 사용하는 것입니다.

예시

h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>

인라인 스타일은 특이도 값이 1000으로 가장 높기 때문에 적용됩니다.

!중요한

중요하다고 표시된 CSS 선언은 선택자가 덜 구체적이더라도 충돌하는 모든 선언을 무시합니다.
중요도를 사용하는 것은 나쁜 습관으로 간주되며 피해야 합니다. CSS 문제를 더 어렵게 만들고 스타일 시트를 유지 관리하기 어렵게 만들 수 있습니다.

선택자의 특이성을 다른 선언보다 크게 하는 것이 좋습니다.

더 많은 특이성 규칙

범용 선택기(*)에는 특정 값이 없습니다. 즉, 다른 선택기가 범용 선택기와 충돌할 때마다 선택기가 우선합니다.

충돌하는 여러 선언의 특이성이 동일한 경우. 마지막 스타일 선언이 우선합니다.

결론

이 기사에서는 css 특정성 규칙, 특정성을 계산하는 방법에 대해 배웠습니다.

프론트엔드 개발자로서 특정성을 아는 것은 필수적이며 이 기사가 CSS 특정성을 이해하는 데 도움이 되었기를 바랍니다.