CSS에서 "특이성"은 무엇을 의미합니까?

CSS는 숫자 척도를 사용하여 선택기의 능력을 결정합니다. 어떤 선택자가 가장 강한지, 즉 어떤 선택자가 가장 높은 특이성을 갖는지와 같은 힘입니다. 특정도가 가장 높은 선택자는 다른 약한 선택자가 어떤 스타일을 적용했는지에 상관없이 항상 HTML 요소의 모양을 결정합니다.

버튼 요소가 있는 경우 스타일을 적용하는 방법이 많이 있습니다. CSS에서 일반적으로 사용되는 3가지 선택자는 type입니다. , class , id .

유형 선택기를 통해 직접 요소의 스타일을 지정할 수 있습니다.

button {
  background-color: red;
}

클래스 속성을 사용할 수 있습니다.

.button {
  background-color: red;
}

또는 id 속성:

#button {
  background-color: red;
}

각 선택기의 숫자 값은 1입니다.

따라서 위의 모든 CSS 선택기(유형, 클래스, ID)가 동일한 값(1)을 갖는다면 동일한 스타일 시트에서 사용될 때 위의 규칙 집합 중 어느 것이 승리합니까?

ID 승(#button ) ID가 클래스 및 유형 선택자보다 우선하기 때문입니다.

관련된 ID가 없으면 어떻게 합니까?

그런 다음 클래스 선택기(.button ) 클래스가 유형 선택자보다 우선하기 때문에 승리합니다.

잠깐, CSS의 "Cascade"(CSS =Cascading Style Sheets)는 어떻습니까?

CSS에서 모든 것이 동일한 경우 , 스타일 시트의 마지막에 적용된 선택기가 이깁니다.

동일한 이름을 가진 3개의 클래스를 추가한다고 가정해 보겠습니다. (.hero-button ,) 귀하의 스타일 시트에. 각 클래스는 동일한 스타일 속성(background-color ), 하지만 각 클래스에는 서로 다른 속성 값이 있습니다. , 이 경우 각각 녹색, 파란색, 빨간색입니다.

.hero-button {
	background-color: green;
}

.hero-button {
		background-color: blue;
}

.hero-button {
	background-color: red;
}

그런 다음 3가지 모두를 동일한 HTML 요소에 적용합니다.

<button class="hero-button">Button</button>

마지막 .hero-button 스타일시트의 클래스는 동일한 클래스 이름을 가진 이전 클래스보다 우선하여 버튼의 배경색을 빨간색으로 만듭니다. 이것이 CSS 캐스케이드가 작동하는 방식이며, 특수성 순서는 위에서 아래로, 맨 아래 선택기가 이깁니다. 이것은 모든 것이 동일할 때만 100% 사실임을 기억하십시오.

중요:이름이 같은 선택기가 여러 개인 경우 스타일시트 하단에 있는 선택기는 그렇지 않습니다. 모두 재정의 동일한 이름을 가진 이전 선택기가 적용한 스타일은 만 지정된 스타일 속성을 재정의합니다.

혼란스러운?

걱정하지 마세요. 곧 이해가 될 것입니다.

다음은 3개의 .hero-button입니다. 모두 동일한 background-color를 사용하는 이전 클래스 이전의 속성이지만 처음 두 클래스는 각각 하나의 추가 스타일 속성(padding &font-size ):

.hero-button {
  background-color: green;
  padding: 2rem;
}

.hero-button {
  background-color: blue;
  font-size: 2rem;
}

.hero-button {
  background-color: red;
}

이제 스타일시트에는 동일한 이름을 가진 3개의 CSS 클래스가 있으며 모두 HTML 버튼 요소에 대해 동일한 background-color 속성을 대상으로 하지만 처음 두 클래스에는 추가 스타일 속성이 있습니다. 무슨 일이 일어날 것 같습니까?

결과는 다음과 같습니다.

https://codepen.io/StrengthandFreedom/pen/mdyMGPL

보시다시피 버튼 요소는 3개의 .hero-button의 모든 스타일 속성을 함께 스택(결합)합니다. 이제 버튼 요소는 3가지 속성을 모두 가져옵니다.

  padding: 2rem;
  font-size: 2rem;
  background-color: red;

즉, 스타일시트에 동일한 이름의 CSS 선택기가 있는 경우 선택기가 동일한 속성을 대상으로 하는 경우에만 속성을 재정의하게 됩니다.

위의 예에서 3개의 클래스는 모두 background-color를 대상으로 합니다. 속성 및 여기에서는 CSS Cascade 규칙(Order Specificity)으로 인해 최하위 클래스가 이깁니다. 하지만 마지막 .hero-button 이후로 padding이 아닌 스타일시트 대상의 클래스 font-size도 아닙니다. 속성, 처음 두 개의 .hero-button 속성 버튼 요소에 클래스를 적용할 수 있습니다.

이 시점에서 내가 죽은 말을 이긴 이유는 여러 개발자가 당신의 삶을 비참하게 만드는 데 기여한 거대하고 무질서한 CSS 코드베이스를 다루는 상황에서 필연적으로 자신을 발견하게 될 것이기 때문입니다.

가장 일반적인 시나리오 중 하나는 다른 개발자가 이미 다른 곳에 존재하는 스타일시트에 CSS 클래스를 추가했으며, 앞서 본 것처럼 CSS가 속성을 함께 쌓을 것이라는 사실을 모르거나 잊어버리면 빠르게 혼란을 야기할 수 있다는 것입니다.

따라서 primary-button이라는 CSS 클래스를 추가할 수 있습니다. 다음 속성 사용:

.primary-button {
  background-color: red
  padding: 1rem;
  font-size: 1.125rem;
}

그러나 어떤 이유로 버튼에 추가하지 않은 그림자가 있는 것처럼 보입니다. 누군가가 버튼 요소에 직접 스타일을 적용했기 때문일 수 있습니다.

button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

또는 누군가가 이전에 같은 이름의 스타일시트에 클래스를 추가하고 box-shadow를 추가했기 때문에 다음과 같은 속성:

.primary-button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

원치 않는 스타일을 제거하려면 이 원치 않는 속성이 적용된 코드베이스의 위치를 ​​찾아 제거하거나 내에서 직접 대상으로 지정하고 제거해야 합니다. .primary-button 다음과 같은 클래스:

.primary-button {
 background-color: red
 padding: 1rem;
 font-size: 1.125rem;
 box-shadow: 0; /*removes existing box shadow value*/
}

무슨 생각하는지 알아. 이것은 문제를 해결하는 지저분한 방법입니다. 옳은. 그러나 때로는 기존의 모든 CSS 코드에 액세스할 수 없는 방대하고 조직적이지 않은 프로젝트(일반적으로 많은 레거시 코드 포함)에 노출될 것입니다(일부 경험이 있는 개발자라면 누구나 이에 관련될 수 있음). 이러한 상황에서는 기존 코드를 원하는 대로 수정할 수 없습니다. 기존 코드를 재정의해야 하며, 이 경우 CSS Specificity 및 Source Order 작동 방식을 아는 것이 좋습니다.

이 웹사이트의 Specificity Calculator를 사용하여 그룹 선택기(선택기 결합)를 포함한 다양한 CSS 선택기의 특이도 수를 비교할 수 있습니다.

팁:CSS에서 특정성 문제를 피하는 좋은 방법은 유형 선택기 대신 주로 클래스를 사용하여 UI 스타일을 지정하고 ID만 사용하는 것입니다. 또한 그룹 선택자는 증가하는 코드베이스에서 예측할 수 없는 문제를 일으킬 수 있으므로 가능한 한 사용하지 마십시오.