CSS 우선순위
SOURCE.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
/*
똑같은 속성에 한해서만 우선순위가 .클래스명 이 높다
우선순위순 태그명 < 클래스명 < Id
*/
div {
color:red;
font-weight:bold;
}
.testClass {
font-size:20px;
color:blue;
}
#testId { text-decoration:underline; color:orange; }
span { font-style:italic; }
/* 아이디 배점이 가장 높지만 아래 css태그의 경우는 아이다앞에 태그명이 붙어 우선순위가 더높아졌다. */
#s1 { font-size:10px }
div #s1 { font-size:30px }
/* 루트 단위가 상세해질수록 배점이 높아진다. */
body .testClass span{}
</style>
</head>
<body>
<!-- Ex11_selector.htm -->
<div class="testClass" id="testID"><span>문자열</span>입니다.</div>
<div class="testClass"><span id="s1">문자열</span>입니다.</div>
<div>문자열입니다.</div>
</body>
</html>
결과
