/* 일치 선택자 */
span.orange {
  color:orange;
}

/* 자식 선택자 */
<div>
    <ul>
      <li class="orange"></li>
    </ul>
</div>

ul > .orange {
  color:orange;
}

/* 하위(후손) 선택자 */
<div>
    <ul>
      <li class="orange">오렌지</li>
    </ul>
    <span class="orange">오렌지</span>
</div>
<span class="orange">오렌지</span>

div .orange {
  color:orange;
}

/* 인접 형제 선택자 */
/* 다음 형제 요소 하나를 선택 */
<ul>
  <li>1</li>
  <li>2</li>
  <li class="orange">오렌지</li>
  <li>수박</li>
  <li>사과</li>
</ul>

.orange + li{
  color:orange;
}

/* 일반 형제 선택자 */
/* 다음 형제 요소 모두를 선택 */
<ul>
  <li>1</li>
  <li>2</li>
  <li class="orange">오렌지</li>
  <li>수박</li>
  <li>사과</li>
</ul>

.orange ~ li{
  color:orange;
}