CSS
계단식 및 특이성
수색…
비고
CSS의 특수성은 광범위한 요소 집합에 대한 일반적인 형식 지정 규칙을 정의한 다음 특정 하위 집합에 대해 재정의 할 수 있도록하여 코드의 간결성을 높이려고합니다.
계단식
계단식 및 구체성은 함께 사용되어 CSS 스타일 지정 속성의 최종 값을 결정합니다. 또한 CSS 규칙 집합에서 충돌을 해결하기위한 메커니즘을 정의합니다.
CSS 로딩 순서
스타일은 다음 소스에서이 순서대로 읽습니다.
- 사용자 에이전트 스타일 시트 (브라우저 공급 업체가 제공 한 스타일)
- 사용자 스타일 시트 (사용자가 자신의 브라우저에서 설정 한 추가 스타일)
- 작성자 스타일 시트 (작성자는 웹 페이지 / 웹 사이트의 작성자를 의미 함)
- 어쩌면 하나 이상의
.css파일 - HTML 문서의
<style>요소에서
- 어쩌면 하나 이상의
- 인라인 스타일 (HTML 요소의
style속성에서)
브라우저는 요소를 렌더링 할 때 해당 스타일을 검색합니다.
충돌은 어떻게 해결됩니까?
하나의 CSS 규칙 집합 만 요소의 스타일을 설정하려고 할 때 충돌이 없으며 해당 규칙 집합이 사용됩니다.
충돌하는 설정이있는 여러 규칙 세트가 발견되면 먼저 Specificty 규칙을 사용하고 계단식 규칙을 사용하여 사용할 스타일을 결정합니다.
예 1 - 특이성 규칙
.mystyle { color: blue; } /* specificity: 0, 0, 1, 0 */
div { color: red; } /* specificity: 0, 0, 0, 1 */
<div class="mystyle">Hello World</div>
텍스트의 색은 무엇입니까? (대답을보기 위해 마우스를 올려주세요)
푸른
먼저 특이도 규칙이 적용되고 가장 높은 특이성을 갖는 규칙이 "이기다".
예제 2 - 동일한 선택자를 사용한 계단식 규칙
외부 CSS 파일
.class {
background: #FFF;
}
내부 CSS (HTML 파일)
<style>
.class {
background: #000;
}
<style>
이 경우 동일한 선택자가있는 경우 랭귀지가 실행되고 마지막으로로드 된 것이 "이기기"로 결정됩니다.
예제 3 - 특이성 규칙 이후의 계단식 규칙
body > .mystyle { background-color: blue; } /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; } /* specificity: 0, 0, 1, 1 */
<body class="otherstyle">
<div class="mystyle">Hello World</div>
</body>
배경색은 무엇입니까?
빨간
특이성 규칙을 적용한 후에도 여전히 파란색과 빨간색간에 충돌이 있으므로 계단식 규칙이 특이성 규칙 위에 적용됩니다. 계단식은 동일한 .css 파일 내에서나 스타일 소스 모음에서든 규칙로드 순서를 확인합니다. 마지막으로로드 된 항목은 이전 항목보다 우선합니다. 이 경우 .otherstyle > div 규칙이 "wins"됩니다.
최종 메모
- 선택기 특이성이 항상 우선합니다.
- 스타일 시트 주문 휴식 끈.
- 인라인 스타일은 모든 것을 능가합니다.
중요한 선언!
!important 선언은 규칙에 우선 순위를 부여하여 스타일 시트의 일반적인 특수성을 재정의하는 데 사용됩니다. 그 사용법은 다음과 같습니다 : property : value !important;
#mydiv {
font-weight: bold !important; /* This property won't be overridden
by the rule below */
}
#outerdiv #mydiv {
font-weight: normal; /* #mydiv font-weight won't be set to normal
even if it has a higher specificity because
of the !important declaration above */
}
!important 의 사용을 피하는 것은 절대적으로 필요한 경우를 제외하고 강력하게 권장됩니다. 왜냐하면 스타일 시트에서 불확실성을 초래할 수있는 CSS 규칙의 자연스러운 흐름을 방해하기 때문입니다. 또한 중요한 요소가 여러 개있는 경우, 특정 요소에 대해 동일한 규칙에 여러 개의 !important 선언을 적용하면보다 높은 특이성을 갖는 선언이 적용됩니다.
!important 선언을 사용할 수있는 몇 가지 예가 있습니다 :
- html 요소의
style속성 내부에 작성된 요소의 인라인 스타일에 의해 규칙을 재정의해서는 안됩니다. -
!important사용하여 작성자 스타일을 재정 의하여 글꼴 크기의 크기를 늘리거나 줄이는 것과 같은 웹 접근성을 제어 할 수 있습니다. - inspect 요소를 사용하여 테스트 및 디버깅합니다.
참조 :
선택기 특이성 계산
각각의 개별 CSS 셀렉터는 고유 한 특이도 값을 가지고 있습니다. 서열의 모든 선택자는 서열의 전반적인 특이성을 증가시킨다. 선별자는 세 가지 다른 특이성 그룹 중 하나 인 A , B 및 C 중 하나에 속합니다. 여러 셀렉터 시퀀스가 특정 요소를 선택하면 브라우저는 전체적인 특수성이 가장 높은 시퀀스에 적용된 스타일을 사용합니다.
| 그룹 | 다음으로 이루어진 | 예제들 |
|---|---|---|
| 에이 | ID 선택자 | #foo |
| 비 | 클래스 선택자 속성 선택자 가상 클래스 | .bar [title] , [colspan="2"] :hover , :nth-child(2) |
| 기음 | 유형 선택기 의사 요소 | div , li ::before ::first-letter |
그룹 A는 최종적으로 그룹 C 그룹 B,이어서 가장 구체적이다.
범용 선택기 ( * )와 결합 자 ( > 및 ~ )는 특별한 성향이 없습니다.
예 1 : 다양한 선택자 서열의 특이성
#foo #baz {} /* a=2, b=0, c=0 */
#foo.bar {} /* a=1, b=1, c=0 */
#foo {} /* a=1, b=0, c=0 */
.bar:hover {} /* a=0, b=2, c=0 */
div.bar {} /* a=0, b=1, c=1 */
:hover {} /* a=0, b=1, c=0 */
[title] {} /* a=0, b=1, c=0 */
.bar {} /* a=0, b=1, c=0 */
div ul + li {} /* a=0, b=0, c=3 */
p::after {} /* a=0, b=0, c=2 */
*::before {} /* a=0, b=0, c=1 */
::before {} /* a=0, b=0, c=1 */
div {} /* a=0, b=0, c=1 */
* {} /* a=0, b=0, c=0 */
예 2 : 브라우저에서 구체성을 사용하는 방법
다음 CSS 구현을 상상해보십시오.
#foo {
color: blue;
}
.bar {
color: red;
background: black;
}
여기에는 color 을 파란색으로 선언하는 ID 선택기와 color 을 빨간색으로 , 검정색으로 background 을 선언하는 클래스 선택기가 있습니다.
ID가 #foo 이고 클래스가 .bar 는 두 선언에서 모두 선택됩니다. ID 선택자는 그룹 A 특이성을 가지며 클래스 선택자는 그룹 B 특이성을 갖는다. ID 셀렉터는 클래스 셀렉터의 수를 능가합니다. 이 때문에 color:blue; #foo 선택기 및 background:black; .bar 선택자에서 요소가 요소에 적용됩니다. ID 선택기의 특이성이 높을수록 브라우저는 .bar 선택기의 color 선언을 무시하게됩니다.
이제 다른 CSS 구현을 상상해보십시오.
.bar {
color: red;
background: black;
}
.baz {
background: white;
}
여기에는 두 개의 클래스 선택자가 있습니다. 하나는 선언 color 빨간색과 같은 background 검은 색으로, 다른 하나는 선언 background 흰색으로.
.bar 와 .baz 클래스를 가진 요소는이 두 선언의 영향을 받지만, .bar 와 .baz 는 동일한 그룹 B 특이성을 가지고 있습니다. CSS의 계단식 자연은 우리를 위해이 문제를 해결합니다으로 .baz 후 정의 .bar , 우리의 요소는 빨간색으로 끝나는 color 에서 .bar 하지만, 흰색 background 에서 .baz .
예 3 : 특이성을 조작하는 방법
위의 예제 2의 마지막 스 니펫을 조작하여 .baz 클래스 선택기 대신에 .bar 클래스 선택기의 color 선언이 사용되도록 할 수 있습니다.
.bar {} /* a=0, b=1, c=0 */
.baz {} /* a=0, b=1, c=0 */
이를 달성하는 가장 일반적인 방법은 .bar 선택기 시퀀스에 적용 할 수있는 다른 선택기를 찾는 것입니다. 예를 들어 .bar 클래스가 span 요소에만 적용된 경우 .bar selector를 span.bar 수정할 수 있습니다. 이렇게하면 .baz 선택 .baz 없는 새 그룹 C 특수성이 .baz .
span.bar {} /* a=0, b=1, c=1 */
.baz {} /* a=0, b=1, c=0 */
그러나 .bar 클래스를 사용하는 모든 요소간에 공유되는 다른 공통 선택기를 항상 찾을 수있는 것은 아닙니다. 이 때문에 CSS는 선택자를 복제하여 특이성을 높일 수 있습니다. 그냥 .bar 대신에 .bar.bar 대신 사용할 수 있습니다 ( Selectors의 문법 참조 , W3C 권장 사항 ). 여전히 .bar 클래스의 요소를 선택하지만 이제는 그룹 B 특수성을 두 배로 늘 .bar .
.bar.bar {} /* a=0, b=2, c=0 */
.baz {} /* a=0, b=1, c=0 */
!important 및 인라인 스타일 선언
스타일 선언의 !important 플래그와 HTML style 속성으로 선언 된 style 은 모든 선택기보다 더 큰 특이성을 가진 것으로 간주됩니다. 이러한 요소가 존재하면 스타일에 영향을 미치는 스타일 선언은 특수성에 관계없이 다른 선언을 무효화합니다. 즉, 동일한 요소에 적용되는 동일한 속성에 대해 !important 플래그가 포함 된 선언이 두 개 이상있는 경우가 아니면 그런 다음, 일반 특이성 규칙이 서로 참조하여 해당 특성에 적용됩니다.
그것들은 특이성을 완전히 오버 라이딩하기 때문에, !important 의 사용은 대부분의 유스 케이스에서 눈살을 찌푸리게됩니다. 하나는 가능한 한 그것을 사용해야합니다. 장기적으로 CSS 코드를 효율적으로 유지 보수하기 위해서는 !important 를 사용하는 것보다 주변 선택기의 특이성을 높이는 !important 좋습니다.
드문 예외 중 하나는 !important 하지 않은 부분입니다 !important 즉, .hidden 또는 .background-yellow 클래스와 같은 일반 도우미 클래스를 구현할 때 항상 발생하는 하나 이상의 속성을 덮어 씁니다. 그리고 그때조차도, 당신이하는 일을 알아야합니다. 유지 보수 가능한 CSS를 작성할 때 마지막으로 원하는 것은 CSS 전체에 !important 플래그를 넣는 것입니다.
최종 메모
CSS 특이성에 대한 일반적인 오해는 그룹 A , B 및 C 값이 서로 결합되어야한다는 것입니다 ( a=1, b=5, c=1 => 151). 이것은 사실이 아닙니다 . 이 경우 그룹 B 또는 C 선택기 20 개를 사용하면 각각 하나의 그룹 A 또는 B 선택기를 무시할 수 있습니다. 세 그룹은 개별적인 수준의 특수성으로 간주되어야합니다. 특이성은 단일 값으로 표현 될 수 없습니다.
CSS 스타일 시트를 만들 때 가능한 한 가장 낮은 특이성을 유지해야합니다. 다른 방법을 덮어 쓰려면 특이성을 좀 더 높게 만들어야 할 필요가 있다면 가능한 높게 만들고 낮게 만들어 높게 만듭니다. 다음과 같은 선택기가있을 필요는 없습니다.
body.page header.container nav div#main-nav li a {}
이것은 미래의 변경을 더 어렵게 만들고 그 CSS 페이지를 오염시킵니다.
당신은 여기 에 당신의 선택 자의 특이성을 계산할 수 있습니다.
보다 복잡한 구체화의 예
div {
font-size: 7px;
border: 3px dotted pink;
background-color: yellow;
color: purple;
}
body.mystyle > div.myotherstyle {
font-size: 11px;
background-color: green;
}
#elmnt1 {
font-size: 24px;
border-color: red;
}
.mystyle .myotherstyle {
font-size: 16px;
background-color: black;
color: red;
}
<body class="mystyle">
<div id="elmnt1" class="myotherstyle">
Hello, world!
</div>
</body>
텍스트의 테두리, 색상 및 글꼴 크기는 어떻게됩니까?
글꼴 크기 :
font-size: 24;,#elmnt1룰 세트는 문제의<div>에 대해 가장 높은 특이성을#elmnt1때문에 여기에있는 모든 속성이 설정됩니다.
경계:
border: 3px dotted red;. 경계 색red은#elmnt1규칙 집합에서 취해#elmnt1, 가장 높은 특이성을 가지고 있기 때문입니다. 테두리, 테두리 두께 및 테두리 스타일의 다른 속성은div규칙 집합에서 가져옵니다.
배경색:
background-color: green;.background-color은div,body.mystyle > div.myotherstyle및.mystyle .myotherstyle규칙 세트에 설정됩니다. 특이성은 (0, 0, 1) 대 (0, 2, 2) 대 (0, 2, 0)이므로 가운데 하나가 "이깁니다".
색깔:
color: red;. 색상은div및.mystyle .myotherstyle룰 세트에서 설정됩니다. 후자는 (0, 2, 0)과 "승리"의 높은 특이성을 가지고 있습니다.