wiki:css:css_note:css_specificity

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_specificity [2021/04/21 14:56]
emblim98 만듦
+++ wiki:css:css_note:css_specificity [2023/01/13 18:44] (현재)
@@ 줄 52: / 줄 52: @@
 ====예제====
 <code css>
-A: %%h1%%
+A: h1
-B: %%#content h1%%
+B: #content h1
-C: %%<div id="content"><h1 style="color: #ffffff">Heading</h1></div>%%
+C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
 </code>
 \\
@@ 줄 108: / 줄 108: @@
 </html>
 </code>
 \\
 상기 예제에서, %%CSS%%의 첫 번째 규칙이 나머지 두 개의 규칙보다 더 구체적이어서 적용됩니다.\\
 \\
-**컨텍스추얼 셀렉터(Contextual selectors)**는 단일 요소 셀렉터보다 더 구체적입니다.**\\
--%%html%% 파일 내부에 작성된 스타일시트가 해당 요소에 더 가까이 있어,\\
+**컨텍스추얼 셀렉터(Contextual selectors)는 단일 요소 셀렉터보다 더 구체적입니다.**\\
+%%html%% 파일 내부에 작성된 스타일시트가 해당 요소에 더 가까이 있어,\\
 해당 요소는 내장된 스타일시트에 따라서 스타일이 적용됩니다.\\
 \\
 ====예제====
 <code css>
-From external %%CSS%% file:
+From external CSS file:
 #content h1 {background-color: red;}
-In %%HTML%% file:
+In HTML file:
 <style>
 #content h1 {
@@ 줄 131: / 줄 133: @@
 \\
 **클래스 셀렉터는 어떤 요소 셀렉터도 능가합니다**\\
-- %%.intro%%와 같은 클래스 셀렉터는 %%h1%%, %%p%%, %%div%% 등을 능가합니다.\\
+%%.intro%%와 같은 클래스 셀렉터는 %%h1%%, %%p%%, %%div%% 등을 능가합니다.\\
 ====예제====

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_specificity.1618984592.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)