css의 팝송
그 important보다 조금 더 important의 important를 표현할 수 없습니다.
세상에는 많은 일들이 important의 것이기 때문에 important의 강약 상태를 잘 표현하고 싶습니다.
어떤 스타일을 적용합니까?
나는 id 지정이class 지정보다 강하다는 것을 알고 있지만 CSS의 개체성을 처음 알았다.
id는 1개에 100점, 클라스는 1개에 10점, 합계점이래요.
그럼 클라스 11개를 더하면 id를 이길 수 있을까요?그렇게 생각하면 이길 수 없어.
(기수가 비교적 큰 수치 시스템).
<body id="important" class="important">
바디가 아니면 important이 아닐 수도 있지만, 맨 위에 있는 부모 요소를 연속으로 치는 id와class는 곧 important의 상황을 표현할 수 있을 것이다.<body id="important" class="important">
<div class="x1 x2 x3">
A
</div>
<div id="yyy" class="zzz">
B
</div>
<a class="qqq">C</a>
<div id="foo" class="ppp">
<div id="bar" class="ppp">
<div id="baz" class="ppp">
D
</div>
</div>
</div>
</body>
div{ margin: 1em; }
/* class5個で50点 */
.important.important .x1.x2.x3{ background-color: red; }
/* class4個で40点 */
.x1.x1.x1.x1{ background-color: green; }
/* class3個で30点 */
.x1.x2.x3{ background-color: blue; }
/* id2個で200点 */
#important #yyy{ background-color: red; }
/* id1個+class2個で120点 */
.important.important #yyy{ background-color: green; }
/* id1個+class1個で110点 */
#yyy.zzz{ background-color: blue; }
/* class2個 + 要素1個 = 21点 */
.important.important a{ background-color: red; }
/* class1個 + 要素1個 = 11点 */
a.qqq{ background-color: blue; }
/* id4個 = 400点*/
#important#important#important #baz{
background-color: red;
}
/* id3個 + class3個 + 要素3個 = 333点 */
div#foo.ppp div#bar.ppp div#baz.ppp{
background-color: blue;
}
!important=∞점#important=100점.important = 10시
바디가 아니면 important이 아닐 수도 있지만, 맨 위에 있는 부모 요소를 연속으로 치는 id와class는 곧 important의 상황을 표현할 수 있을 것이다.
<body id="important" class="important">
<div class="x1 x2 x3">
A
</div>
<div id="yyy" class="zzz">
B
</div>
<a class="qqq">C</a>
<div id="foo" class="ppp">
<div id="bar" class="ppp">
<div id="baz" class="ppp">
D
</div>
</div>
</div>
</body>
div{ margin: 1em; }
/* class5個で50点 */
.important.important .x1.x2.x3{ background-color: red; }
/* class4個で40点 */
.x1.x1.x1.x1{ background-color: green; }
/* class3個で30点 */
.x1.x2.x3{ background-color: blue; }
/* id2個で200点 */
#important #yyy{ background-color: red; }
/* id1個+class2個で120点 */
.important.important #yyy{ background-color: green; }
/* id1個+class1個で110点 */
#yyy.zzz{ background-color: blue; }
/* class2個 + 要素1個 = 21点 */
.important.important a{ background-color: red; }
/* class1個 + 要素1個 = 11点 */
a.qqq{ background-color: blue; }
/* id4個 = 400点*/
#important#important#important #baz{
background-color: red;
}
/* id3個 + class3個 + 要素3個 = 333点 */
div#foo.ppp div#bar.ppp div#baz.ppp{
background-color: blue;
}
!important=∞점#important=100점.important = 10시
Reference
이 문제에 관하여(css의 팝송), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takeru@github/items/029dd1a0d866d35a2230텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
