@charset "UTF-8";

/* selector_02.css */

a {color: inherit; text-decoration: none;}

ul a{color:gray;}
li> .an_01{color:orange;}
li a {color:red}
.an_01{color:blue;}


ul a {background-color: red}
li a {background-color: blue}

/*먼저쓴것이 먹는다. */

ul li a {background-color: gray}
/*단, 다 쓸경우는 이것이 먹는다. 많이 언급한 아이가 우선순위*/


/*자식과 자손은 동급이다.
  조건에 따라서 달라진다. 
  어디에서 지정하는거에 따라서 권한이 달라진다. 
  직접할거야 / 강제성 / 등 (우선순위)
  우선순위 먼저 처리하고 나머지는 빼는것
  type: 직접태그보다 우선 class 네이밍 ;
  우선순위: type <. class <# id < 부모선택 < !important(사용X)

  type, class, id, 부모선택은 수정이 되는데 important는 기능쓰면 수정불가

  li >  ul a{} >  a{}

  우선순위 type < class < id < prarents < important
  우선순위를 사용할때, 복합으로 섞이게 되면 언급여부에 따라 순위는 조금 변동될수있다.

!important > 인라인 스타일 속성 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자


*/



/*pseudo code: 의사전달 코드 (하나의 언어/ 의식의 흐름에 따라 전달 /형체가없다)
	FOCUS: tab을 눌럿을때 상자 나올때
	focus 처리되는 기능은: a, button, input, select, teatarea;
	span:focus{background-color: #000;}  => 안먹는다
	a:focus >span{background-color: #000;} =>먹는다 (a태그가 잇어서)

	focus/active = 동급 쓰는 우선순위 
*/
span{background-color: #ddd;}
span:hover{background-color: #f00;}
a:focus >span {outline-width:5px; outline-style:solid; outline-color: #000;}
a:active > span {background-color: #00f;}
/*outline:5px solid #000; 축약형*/
a:visited >span {color: #fff;}
/*a:focus{background-color: #000;}*/


/*span{background-color: #ddd;}
span:hover{background-color: #f00;}
a:focus >span {background-color: #77A;}
a:active > span {background-color: #00f;}
a:visited >span {color: #fff;}
a:focus{background-color: #000;}



span{background-color: #ddd;}
span:hover{background-color: #f00;}
a:focus >span {background-color: #77A;}
span {background-color: #00f;}
span {color: #fff;}
a:focus{background-color: #000;}*/

p{margin: 100px auto; width: 500px; height: 100px;
	text-align: center; line-height: 100px;
	border-width: 3px; border-style: solid; border-color: #777}

	p:before{content:"어떻게될까요?"; color:#f00; font-weight: bold;}
	p:after{content:"어디에 있을까요"; color:#00f; font-weight: bold;}

	/*회원가입시 필수항목 *옆에 적을때 */