css 선택자의 조합

1. 하위 선택자에 대해서

  1)공백을 통하여 부모와 자식을 구분지어 준다.

  2)부모가 먼저 나오고 자식이 나중에 나온다.

  3)특정한 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용한다.

<style type="text/css">

  #navigation li {

      color:red;

}

</style>

<div id="navigation">

   <ul>

       <!----- 글자 색상이 red로 지정됨--->

       <li>메인</li>

       <li>회사소개</li>

       <li>제품소개</li>

  </ul>

</div>

 <ul>

       <!--- 하단의 내용들은 영향을 받지 않습니다. ---->

   <li>메인</li>

   <li>회사소개</li>

   <li>제품소개</li>

</ul>

2. 하나의 css선언을 통해 여러개의 선택자에게 적용하기

  1)선택자와 선택자를 ',(콤마)'로 구분합니다.

  2)하나의 css선언을 여러 엘리먼트 셀렉트에 적용하고 싶어할때 사용합니다.

<!--- h1과 #link 선택자와 사이에서, (콤마)를 두어 글씨의 색을 파란색으로 지정 --->

<style type="text/css">

   h1, #link{

      color:blue;

 }

</style>

<h1> 둥둥이 싸이트 오늘도 이렇게 하루가 흘러간다.</h1>

<a id="link" herf="http://dungx2.tistory.co.kr">둥둥이 </a>

3.자식선택자 chid selector

  1)ie6은 지원하지 않음

  2)특정한 엘리먼트에 직접적인 하위 엘리먼트에 대하여만 선택할 때 사용합니다.

     (하위 선택자와 다름니다.)

<!--- id navigation의 직접적인 자식인 li만 테두리가 생기며, <li>약도</li>의 하위에 엘리먼트

에는 테두리가 생성되지 않습니다.--->

<style type="text/css">

    #navigation>li{

       border: 2px solid blue;

  }

</style>

 <ul id="navigation">

  <li>메인</li>

  <li>약도

      <ul>

        <li>제품소개</li>

        <li>회사소개</li>

     </ul>

  </li>

 <li></li>

</ul>