CSS Selector 세부 사항 이해 강화
CSS 선택기의 세부 사항
규격
규격에서 보듯이 "상세도"는
selector's specificity
따라서 선택기의 상세도.
상세도는 계산할 수 있다.
MDN
세부 사양은 브라우저에서 요소와 가장 연관된 CSS 속성을 결정하는 방법입니다. 즉, CSS 속성을 적용하는 방법입니다.상세도는 여러 조합된 CSS 선택기로 구성된 일치 규칙에 근거합니다.
"분명히 속성을 썼는데 적용되지 않아요!"이렇게 DevTools를 열면 실제로 접촉하고 싶은 속성에 삭제선이 있습니다. 이런 일이 발생할 수 있습니다.
※ 다음 문장의 인용은 주석이 없으면 이 페이지에서 인용됩니다.
기본
아이템 비교 시 속성 우선도 높이 순서는 다음과 같습니다.
(여기서'상세도'를 쓰지 않았습니다. 엄밀히 말하면!important와 style 속성은 선택기가 아니기 때문에 선택기의 상세도와 다른 규격입니다)高
0. !important
1. HTML上のstyle属性に書かれたプロパティ
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似セレクタ
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ
低
!important
!important 규칙이 스타일 선언에 사용될 때, 성명 목록의 어느 위치에 있든지 간에 이 성명은 CSS에서 만든 다른 성명을 덮어씁니다.
선택기의 상세도와 다른 규격은 모든 다른 속성을 덮어쓰기 때문에 우선순위가 가장 높다.!important 이 속성에 대해 설명하는 경우 선택기의 세부 내용이 적용됩니다.
세기말의 무법지대이니 사용하지 마세요.
HTML에 쓰인 style 속성의 속성
요소에 추가된 내연 스타일은 항상 외부 스타일시트의 스타일을 덮어씁니다.
선택기의 상세도와 다른 규격은 덮어쓰기!important 이외의 속성으로 인해 우선도가 높습니다.
ID 선택기, 클래스 선택기, 속성 선택기, 위조 선택기, 요소 유형 선택기, 위조 요소
아이템 비교 시 속성 우선도 높이 순서는 다음과 같습니다.
(여기서'상세도'를 쓰지 않았습니다. 엄밀히 말하면!important와 style 속성은 선택기가 아니기 때문에 선택기의 상세도와 다른 규격입니다)
高
0. !important
1. HTML上のstyle属性に書かれたプロパティ
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似セレクタ
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ
低
!important
!important 규칙이 스타일 선언에 사용될 때, 성명 목록의 어느 위치에 있든지 간에 이 성명은 CSS에서 만든 다른 성명을 덮어씁니다.
선택기의 상세도와 다른 규격은 모든 다른 속성을 덮어쓰기 때문에 우선순위가 가장 높다.
!important 이 속성에 대해 설명하는 경우 선택기의 세부 내용이 적용됩니다.세기말의 무법지대이니 사용하지 마세요.
HTML에 쓰인 style 속성의 속성
요소에 추가된 내연 스타일은 항상 외부 스타일시트의 스타일을 덮어씁니다.
선택기의 상세도와 다른 규격은 덮어쓰기
!important 이외의 속성으로 인해 우선도가 높습니다.ID 선택기, 클래스 선택기, 속성 선택기, 위조 선택기, 요소 유형 선택기, 위조 요소
#hoge.hoge[name="hoge"]:hoverdiv::before전체 선택기(*), 조합자(+,>,~,'‖) 및 부정 위조류(:not()는 상세도에 영향을 주지 않습니다.(단, not () 에서 선언된 선택기가 영향을 미칩니다.)
상세도 계산 방법
사고 방법
선택기들은 모두 상세한 점수를 가지고 있다.
점수의 종류는 3개이며, 이 선택기의 숫자 3개를 배열하여 상세도를 만든다.
모델로서 소프트웨어의 의미 버전의 표식과 같다.セレクタ {
プロパティ: 値;
}
이러한 CSS의 표기법에는 "선택기"부분에 등장하는 선택기들의 점수가 괄호 안에 있는'속성'들의 상세도가 된다.
선택기 포인트
양식서와 다른 표기지만 이해하기 쉽도록 의미 판본과 똑같이 표기한다.
선택기
분수
ID
1.0.0
클래스, 속성, 위조
0.1.0
요소 유형, 위조 요소
0.0.1
전칭, 조합부호, 부정위류 (그중 부정위류 내의 선택기는 계산에 포함됨)
무시
예제
hoge.css.hoge.piyo {
background-color: blue;
}
.hoge {
background-color: red;
}
의 파일, 위아래 각각의 상세도
セレクタ {
プロパティ: 値;
}
.hoge.piyo {
background-color: blue;
}
.hoge {
background-color: red;
}
background-color: blue;를 적용합니다.
HTML 파일 표시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSの詳細度</title>
<style>
.hoge {
width: 200px;
height: 200px;
}
.hoge.piyo {
background-color: blue;
}
.hoge {
background-color: red;
}
</style>
</head>
<body>
<div class="hoge piyo"></div>
</body>
</html>
수위의 장애를 넘지 않을 거예요.
주의해야 할 것은 이 세 가지 점수, 예를 들어 다음 숫자가 1000개가 모여도 상세도로 이전 분수를 초과하지 않는다는 것이다.
(처음에는'합계'라는 단어로 표시했지만 어병을 일으킬 수 있다고 생각해서 수정했다.)
hoge.css
#hoge {
background-color: green;
}
.hoge1.hoge2.hoge3.hoge4.hoge5.hoge6.hoge7.hoge8.hoge9.hoge10.hoge11.hoge12.hoge13 {
background-color: red;
}
<div id="hoge"
class="hoge hoge1 hoge2 hoge3 hoge4 hoge5 hoge6 hoge7 hoge8 hoge9 hoge10 hoge11 hoge12 hoge13" >
HOGE
</div>
green (id로 지정된 값) 입니다.
즉, 이런 상황에서 id의 상세도 #hoge는 1.0.0이고 아래 클래스의 연결은 13개이기 때문에 1.3.0이 아니라 0.13.0이다.
Reference
이 문제에 관하여(CSS Selector 세부 사항 이해 강화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryokkkke/items/ec1ca2baebe4a984f7a6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
