CSS Specificity 개념은 약간의 트위스터(3배 빠르게 말해보세요!)일 뿐만 아니라 약간의 마음의 벤더이기도 합니다! CSS에서 이해하기 어려운 개념 중 하나입니다. 이 기사에서는 특이성의 의미, 계산 방법, 선택기의 순위가 페이지에 렌더링되는 스타일을 결정하는 방법을 다룰 것입니다. 그러니 걱정하지 마십시오! 당신은 곧 특정성 전문가가 될 것입니다.
'특이성'이란 무엇을 의미합니까?
CSS 특이성은 기본적으로 선택기가 얼마나 중요한지를 나타냅니다. 각 선택자는 유형에 따라 특정성이 할당됩니다. 선택기의 수가 높을수록 더 구체적이며 CSS의 특정 블록이 스타일링 전쟁에서 승리할 가능성이 높아집니다.
특이성은 각각 쉼표로 구분된 4개의 숫자로 표시됩니다.
Selector specificity = 0, 0, 0, 0
쉼표가 없는 4개의 숫자 문자열(예:0000, 0101, 1001 등)로 특이성을 보면 높을 숫자는 더 구체적입니다. 그것은.
순위별 선택자의 특이성(낮음 – 높음):
순위에 따라 다양한 유형의 요소를 살펴보겠습니다.
- ＊
범용 선택기. 특이도는 0, 0, 0, 0입니다. 일반적으로 스타일 시트 상단에서 볼 수 있습니다. 중요도 측면에서 순위에서 가장 낮습니다. 거의 모든 것이 이를 재정의하거나 범용 선택기 CSS에 추가합니다.
- >, ➕, ' , ∼
유형 선택자 또는 클래스 선택자의 자식 형제를 선택할 때 일반적으로 표시되는 결합자는 특정성에 영향을 주지 않으며 전체 수에 포함되지 않습니다. 부정 의사 클래스(:not)도 이 특이성 범주에 맞습니다.
- div, form, ul, li 등
유형입니다. 선택자. 이러한 선택기는 HTML에서 태그로 간주될 수 있는 모든 것을 거의 포함합니다. 특이성 가중치는 0, 0, 0, 1입니다. 결합자로 분리된 유형 선택자가 여러 개 있는 경우 선택자를 함께 추가합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
div li {} ⇐ the specificity is 0,0,0,2
div li p {} ⇐ the specificity is 0,0,0,3 - .main-container, .navbar, [type=”텍스트”], :hover
다음은 클래스, 속성 및 유사 클래스 선택기입니다.
클래스 선택자는 시작 부분에 점(".")으로 표시됩니다. 속성 선택기의 유형 선택기 옆에 대괄호 안에 속성이 있습니다. 의사 클래스 선택기는 보다 구체적인 스타일 지정이 필요한 특수 요소용으로 예약되어 있습니다. 이들은 0, 0, 1, 0의 특이성을 가지고 있습니다.
div.navlink a {} – 하나의 클래스 선택자와 하나의 유형 선택자가 있기 때문에 특이성은 0, 0, 1, 1입니다.
div.header li.list-item-disc button[type="submit"] {} – 3개의 유형 선택자와 2개의 클래스 선택자 + 1개의 속성 선택자가 있기 때문에 특이성은 0, 0, 3, 3입니다. 속성 선택기를 제거하면 특이성은 0, 0, 2, 3이 됩니다. 23은 33보다 작기 때문에 특이성이 0, 0, 3, 3인 CSS 선택기가 더 높은 특이성을 가지므로 승리합니다.
- #파란색, #숨겨진 등
ID 선택기는 CSS 선택기 중에서 가장 높은 특이성을 가지고 있습니다:1, 0, 0, 0. ID 속성 정의의 고유한 특성 때문에 우리는 일반적으로 CSS에서 ID를 호출할 때 정말 특정한 요소의 스타일을 지정합니다.
div#orange {} – 유형 선택자와 ID 선택자가 있으므로 특이성은 1, 0, 0, 1입니다. 다음 중 특정 규칙에 따라 어떤 스타일이 승리합니까?
div#orange {
background-color: orange;
}
div.square {
background-color: green;
width: 150px;
height: 150px;
} - 첫 번째 div에는 유형 선택기와 ID 선택기가 있어 전체 특이성을 1, 0, 0, 1로 만듭니다.
- 두 번째 div에는 유형 선택기와 클래스 선택기가 있어 전체 특이성을 0, 0, 1, 1로 만듭니다.
1001은 11보다 크므로 CSS의 계단식 특성과 달리 첫 번째 div가 승리하고 배경색이 주황색이 됩니다.
- 인라인 스타일
인라인 스타일링이 이 모든 것에 어떻게 들어맞습니까? 더욱 더 ID 선택자보다 구체적입니다. 인라인 스타일은 CSS 파일의 모든 것을 능가합니다. 특이성 측면에서 가장 높은 가중치를 부여합니다.
!important규칙
!important 키워드는 모든 것을 능가합니다. 가장 구체적이며 CSS에서 설정한 이전 규칙을 덮어씁니다.
연습
아래 코드 편집기에서 임의의 클래스 이름과 ID 이름을 사용하여 샘플 컨테이너 페이지를 만들었습니다. 잠시 시간을 내어 CSS 기술을 사용하여 특정 요소를 다른 색상으로 변경하고 다른 모든 div는 동일한 색상으로 유지하는 방법을 연습해 보시기 바랍니다. CSS에서 이러한 규칙을 어떻게 작성하시겠습니까? 특정 요소를 대상으로 하는 데 사용하는 것이 필요하다면 가장 높은 특이성을 얻기 위해 무엇을 사용하겠습니까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Specificity</title>
<style>
body {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
main {
width: 100%;
height: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
div {
text-align: center;
}
*.square {
/* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis? */
height: 150px;
width: 150px;
background-color: black;
color: white;
margin: 20px;
}
div.flex {
/* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
*/
display: flex;
justify-content: center;
align-items: center;
}
div#red {
/* why does this one win out? What is the specificity of this div? */
background-color: darkred;
}
#red {
/* What would happen if we took the 'div' out of the previous selector? Which one wins? */
background-color: red;
}
main > div {
font-size: 55px;
font-weight: bold;
}
div#self-align {
/* What happens here? */
align-self: center;
}
</style>
</head>
<body>
<main>
<div id="self-align" class="square flex">1</div>
<div class="square flex">2</div>
<div class="square flex">3</div>
<div class="square flex">4</div>
<div class="square flex">5</div>
<div id="red" class="square flex">6</div>
<div class="square flex">7</div>
<div class="square flex">8</div>
<div class="square flex">9</div>
<div class="square flex">10</div>
<div class="square flex">11</div>
<div class="square flex">12</div>
</main>
</body>
</html> 결론
이 기사에서 우리는 CSS Specificity에 대해 논의했습니다. 구체적으로 어떤 선택자가 다른 선택자보다 더 구체적이고 실제 특정성 수를 알아내는 방법에 대해 설명합니다. 처음 읽을 때 즉시 나타나지 않더라도 낙담하지 마십시오. 이것은 소화해야 할 많은 정보입니다. 그것을 유지하면 곧 얻을 수 있습니다!