CSS 선택기 우선 순위 (상세도)
8615 단어 HTML5
상세도로 검색하면 올바른 내용이 나오는 한편으로 우선도, 우선순위로 검색하면 잘못된 정보가 나오므로 곤란한 것.
참고 사이트
상세도 - CSS: 캐스케이딩 스타일시트 | MDN
Specifishity :: Specificity with Fish
결론
다음 순서로 CSS가 반영됩니다.
1로 정해지지 않으면 2, 2로 정해지지 않으면 3...이라고 순서대로 판정해 간다
다음 순서로 CSS가 반영됩니다.
1로 정해지지 않으면 2, 2로 정해지지 않으면 3...이라고 순서대로 판정해 간다
!important 규칙이 사용되는 것 #id 등)의 수가 가장 많은 것 .class 등), 속성 선택기 ( [attr] 등), 의사 선택기 ( ::hover , :nth-child() 등)의 수가 가장 많은 것 div , input 등)의 수가 가장 많은 것 검증
CSS 셀렉터끼리의 비교와 출현순서에 의한 영향
<html>
<head>
<style>
#simple-sample .red {
color: red !important;
}
#simple-sample #yellow {
color: darkgoldenrod;
}
#simple-sample :nth-child(2) {
color: blue;
}
#simple-sample [attr] {
color: green;
}
#simple-sample .lightseagreen {
color: lightseagreen;
}
#simple-sample div {
color: purple;
}
</style>
</head>
<body>
<div id="simple-sample">
<div>
<span>要素セレクタの優先度が一番低い</span>
<div>
<span>要素セレクタの次に疑似セレクタなど</span>
<div attr>
<span>疑似セレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div class="lightseagreen">
<span>クラスセレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div id="yellow">
<span>要素セレクタ、疑似セレクタ、クラスセレクタの次にIDセレクタ</span>
<div style="color: orangered">
<span>セレクタを頑張って書いても基本的にインラインスタイルに負ける</span>
<div class="red">
<span>!importantはインラインスタイルすら無視する</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
어느 셀렉터가 많아도 상위 셀렉터는 이길 수 없다.
<html>
<head>
<style>
#many-sample :not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):not(.m):not(.n) {
color: blue;
}
#many-sample .zzz {
color: green;
}
#many-sample #id-selector {
color: red;
}
</style>
</head>
<body>
<div id="many-sample">
<div>
<span>とても長いセレクタの影響を受ける</span>
</div>
<div class="zzz">
<span>同じレベルの要素数が少ないと負ける</span>
</div>
<div>
<span id="id-selector">上位のセレクタ(idセレクタ)には勝てない</span>
</div>
</div>
</body>
</html>
Reference
이 문제에 관하여(CSS 선택기 우선 순위 (상세도)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/suimyakunosoko/items/3ab9b22b6d55fd185da3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<style>
#simple-sample .red {
color: red !important;
}
#simple-sample #yellow {
color: darkgoldenrod;
}
#simple-sample :nth-child(2) {
color: blue;
}
#simple-sample [attr] {
color: green;
}
#simple-sample .lightseagreen {
color: lightseagreen;
}
#simple-sample div {
color: purple;
}
</style>
</head>
<body>
<div id="simple-sample">
<div>
<span>要素セレクタの優先度が一番低い</span>
<div>
<span>要素セレクタの次に疑似セレクタなど</span>
<div attr>
<span>疑似セレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div class="lightseagreen">
<span>クラスセレクタと同じ優先度だが、後に記載されているものが優先される</span>
<div id="yellow">
<span>要素セレクタ、疑似セレクタ、クラスセレクタの次にIDセレクタ</span>
<div style="color: orangered">
<span>セレクタを頑張って書いても基本的にインラインスタイルに負ける</span>
<div class="red">
<span>!importantはインラインスタイルすら無視する</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
#many-sample :not(.a):not(.b):not(.c):not(.d):not(.e):not(.f):not(.g):not(.h):not(.i):not(.j):not(.k):not(.l):not(.m):not(.n) {
color: blue;
}
#many-sample .zzz {
color: green;
}
#many-sample #id-selector {
color: red;
}
</style>
</head>
<body>
<div id="many-sample">
<div>
<span>とても長いセレクタの影響を受ける</span>
</div>
<div class="zzz">
<span>同じレベルの要素数が少ないと負ける</span>
</div>
<div>
<span id="id-selector">上位のセレクタ(idセレクタ)には勝てない</span>
</div>
</div>
</body>
</html>
Reference
이 문제에 관하여(CSS 선택기 우선 순위 (상세도)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/suimyakunosoko/items/3ab9b22b6d55fd185da3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
