CSS 선택자 결합자

일단 코드를 만들자

 

 

 

 

input 태그에 속성값 줘보기

 

 

 

잘 적용 된걸 알수 있다

 

근데 input 태그의 type 이 submit 인것만 바꾸고 싶음 어떻게 해야 될까?

 

input [type="submit] {} 을 쓰면 제출하기 태그만 적용이 되는걸 알수 있다 

 

a 태그도 써보자

 

 

 

됬당

 

 

 

결합자

 

 

 

div 안에 있는 span 태그 컬러 다 바껴야 되는데 안바꼇다 왜 그럴까?

 

 

일단 적용 순위에 대해서 알아 보자

 

 

!important 이게 제일 처음먼저 적용 된다고 한다 

 

2번째 태그안에 자체에 style 적어주는 속성값이 적용된다고 한다

 

 

3번째는 

 

 

뭐가 먼저  적용 될까??

 

 

이메일 색이 퍼플색으로 바뀐걸 알수 있다

 

즉 CSS 선택자는 id class 태그 이름 순서대로 적용되는걸 알수 있음

 

 

 

 

 

부모 자손 결합자라고함 

 

 

 

/* >  +   ~  */

 

 

 

 

 

바뀌었군 div 안에 직계가 span이 로그인하기 밖에 없으니 로그인하기 태그 색깔이 바뀌는걸 알수 있음

 

 

+ 를 써보자

+를 쓰면 바로 형제 테크들인 밑에 태그가 선택 되어진다고 한다 즉 input 타입 이메일 밑에 있는 스펜 태크 비밀번호가 바뀌겠지??

 

음 바뀜

 

~을 쓰면 그럼 다 바뀌겟지

 

input 타입 이메일 뒤에 있는 span 태그의 색깔이 바뀐걸 알수 있음