/* div요소 안에 위치한 모든p요소 선택*/
div p { }
/* div요소 바로아래 위치한 모든p요소 선택*/
div > p { }
/* div요소의 뒤에오는 형제p요소 모두 선택 */
div ~ p { }
/* div요소의 바로뒤에오는 형제p요소 선택 */
div + p { }
CSS적용우선순위
<body style="">
<!-- 이 div는 a의 부모 엘리먼트 이다. -->
<div>
<!-- 이 a는 div의 자식 엘리먼트 이다. -->
<a href="#">네이버</a>
</div>
<section>
<a href="#">구글</a>
</section>
<style>
div>a {
color:green;
}
a {
color:black;
}
</style>- div>a
- 선택자의 길이가 길수록 우선순위를 높게 가져간다.
div>a는a보다 선택자의 길이가 길어 따로 속성을 가져간다.
- a 태그를 사용하는 2가지에 대해 따로 속성을 정의 할 수 있다.
재미있는 것들