Edit in JSFiddle

<body>
	<h1>Big Letter</h1>
	<p> This is for <span class="change"> studying HTMl </span> and CSS !! </p>
	
	<ul id="greet">
		<li>Good Morning ! </li>
		<li>Good Afternoon ! <span class="person"> Mr.kim </span> </li>
		<li>Good Night ! </li>
	</ul>

	<div class="person"> Mr.Kim </div>
	
	
</body>

p{
	font-size: 14px;
}
.change{
	cursor: pointer; /* 링크용 마우스 모양 */
	/* help : 물음표 커서
	   move : 이동하기 위한 커서 모양
	   wait : 모래시계 모양 커서
	   text : 텍스트 편집 중의 커서 모양
	   crosshair : 십자가 모양 커서 
	   n-resize, s-resize : 상하 창 크기 변경 커서 모양
	   w-resize, e-resize : 좌우 창 크기 변경 커서 모양*/
}
/* --------------------------------------------------------------------------------------- */
/*  셀렉터가 a, b 두개 있을 때, 
	a, b -> 모든 a, b에 대해서 스타일 적용
	a b -> 셀렉터 a 밑에 존재하는 b에 대해서 스타일 적용
	a>b -> 셀렉터 a의 바로 밑의 존재하는 b에 대해서 스타일 적용
	ab -> span.person 라고 지정하면 span으로 지정된 person에 대해서만 스타일 적용
	a + b -> a 다음에 선언된 b에 대해서만 스타일 지정
*/

#greet > .person{ 
	color: red;
}
/* 이 예에서는 greet 바로 밑은 li이므로 <span class="person">은 스타일이 적용되지 않는다.*/

span.person{
	color: green;
}

#greet + .person{
	color: yellow;
}