CSS 특수성
특이성이란 무엇입니까?
동일한 요소를 가리키는 CSS 규칙이 두 개 이상 있는 경우 특정 값이 가장 높은 선택자가 "승리"하고 해당 스타일 선언이 해당 HTML 요소에 적용됩니다.
특정성을 요소에 궁극적으로 적용되는 스타일 선언을 결정하는 점수/순위로 생각하십시오.
다음 예를 보십시오.
실시예 1
이 예에서 "p" 요소를 선택기로 사용하고 이 요소에 빨간색을 지정했습니다. 텍스트는 빨간색으로 표시됩니다.
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
이제 예제 2를 보십시오.
실시예 2
이 예에서는 클래스 선택기("test"로 명명)를 추가하고 이 클래스에 대해 녹색을 지정했습니다. 텍스트는 이제 녹색이 됩니다(요소 선택기 "p"에 대해 빨간색을 지정했음에도 불구하고 이는 클래스 선택기에 더 높은 우선순위가 부여되기 때문입니다.
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
이제 예제 3을 보십시오.
실시예 3
이 예에서는 id 선택기(이름이 "demo")를 추가했습니다. id 선택기에 더 높은 우선 순위가 부여되기 때문에 텍스트는 이제 파란색이 됩니다.
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
이제 예제 4를 보십시오.
실시예 4
이 예에서는 "p" 요소에 대한 인라인 스타일을 추가했습니다. 인라인 스타일이 가장 높은 우선 순위를 갖기 때문에 텍스트는 이제 분홍색이 됩니다.
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
특이성 계층
모든 CSS 선택기는 특정 계층 구조에서 위치를 가집니다.
선택자의 특이성 수준을 정의하는 네 가지 범주가 있습니다.
- 인라인 스타일 - 예: <h1 style="color: pink;">
- ID - 예: #navbar
- 클래스, 유사 클래스, 속성 선택기 - 예: .test, :hover, [href]
- 요소 및 유사 요소 - 예: h1, :before
특이성을 계산하는 방법?
특이도를 계산하는 방법을 기억하십시오!
0에서 시작하여 각 ID 값에 대해 100을 추가하고 각 클래스 값(또는 의사 클래스 또는 속성 선택자)에 대해 10을 추가하고 각 요소 선택자 또는 의사 요소에 대해 1을 추가합니다.
참고: 인라인 스타일은 1000의 특이도 값을 가지며 항상 가장 높은 우선 순위를 갖습니다!
참고 2: 이 규칙에는 한 가지 예외가 있습니다. !important
규칙을 사용하면 인라인 스타일도 무시됩니다!
아래 표는 특이성 값을 계산하는 방법에 대한 몇 가지 예를 보여줍니다.
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
가장 높은 특이도 값을 가진 선택자가 승리하여 적용됩니다!
다음 세 가지 코드 조각을 고려하십시오.
예시
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
A의 특이도는 1(요소 선택자 1개)
B의 특이성 101(ID 참조 1개 + 요소 선택자 1개)
C의 특이성 1000(인라인 스타일링)
세 번째 규칙(C)이 가장 높은 특이도 값(1000)을 가지므로 이 스타일 선언이 적용됩니다.
더 많은 특정 규칙의 예
동일한 특이성: 최신 규칙 이 우선 적용 - 동일한 규칙이 외부 스타일 시트에 두 번 작성되면 최신 규칙이 우선 적용됩니다.
예시
h1 {background-color: yellow;}
h1 {background-color: red;}
ID 선택자는 속성 선택자보다 특이성이 높습니다 . 다음 세 가지 코드 라인을 보십시오.
예시
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
첫 번째 규칙은 다른 두 규칙보다 더 구체적이므로 적용됩니다.
상황별 선택기는 단일 요소 선택기보다 더 구체적 입니다. 포함된 스타일 시트는 스타일을 지정할 요소에 더 가깝습니다. 따라서 다음 상황에서
예시
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
후자의 규칙이 적용됩니다.
클래스 선택기는 여러 요소 선택기를 능가합니다 . .intro와 같은 클래스 선택기는 h1, p, div 등을 능가합니다.
예시
.intro {background-color: yellow;}
h1 {background-color:
red;}
범용 선택기(*) 및 상속된 값의 특이성은 0 - 범용 선택기(*) 및 상속된 값은 무시됩니다!