중첩 된 div 스타일 지정 방법

Question

div의 색상을 개별적으로 변경하고 싶지만 다음 CSS를 사용하고 싶지는 않습니다.

는 다음과 내가 사용하는 구문입니다 같이

HTML :

<div id="wrapper"><div><div><div><div><div><div><div> 

</div></div></div></div></div></div></div></div> 

CSS :

.bg-yellow { background-color: yellow; } 
... 
.bg-brown { background-color: brown; } 

HTML :

div>div>div {background-color:yellow;} 
div>div>div>div {background-color:green;} 
div>div>div>div>div {background-color:indigo;} 
div>div>div>div>div>div {background-color:violet;} 
div>div>div>div>div>div>div {background-color:chocolate;} 
div>div>div>div>div>div>div>div {background-color:brown;} 

Answer 1

내가 클래스와 함께 갈 것입니다 :

<div id="wrapper"> 
    <div class="bg-yellow"><div><div><div><div><div><div class="bg-brown"> 
    </div></div></div></div></div></div></div> 
</div> 

이 솔루션을 사용하면 HTML을 검사 할 때 요소의 색을 쉽게 식별 할 수 있습니다.

Answer 2

가장 쉬운 해결책은 클래스 또는 ID를 사용하여 CSS 시트에 연결하는 것입니다 (Daniel의 대답에 따라).

HTML :

<div id="wrapper" class="ClassDiv1"> 
<div class="ClassDiv2"> 
<div class="ClassDiv3"> 
<div class="ClassDiv4"> 
<div class="ClassDiv5"> 
<div class="ClassDiv6"> 
<div class="ClassDiv7"> 
<div class="ClassDiv8"> 

CSS :

.ClassDiv1{background-color:yellow;} 
.ClassDiv2{background-color:green;} 
.ClassDiv3{background-color:indigo;} 

등

당신은 당신이 당신의 스타일이 작업을 수행 할 수 있습니다 1 색 2 div 태그를 원하는 경우 :

.ClassDiv1 .ClassDiv2{background-color:brown;} 

하지만 심각하게, W3Schools에 가서 CSS에 대해 조금 배우면 많이 도움이 될 것입니다!

Answer 3

명명 규칙을 사용하십시오.

.innerDiv1{ 
    background-color:yellow; 
} 

.innerDiv2{ 
    background-color:green; 
} 

.innerDiv3{ 
    background-color:indigo; 
} 

.innerDiv4{ 
    background-color:violet; 
} 

.innerDiv5{ 
    background-color:chocolate; 
} 

.innerDiv6{ 
    background-color:brown; 
} 

또는 LESS 같은 사전 프로세서를 사용할 수 있으며 서로

.innerDiv{ 
    background-color:yellow; 

    div{ 
     background-color:green; 

     div{ 
      background-color:indigo; 

      div{ 
       background-color:violet; 

       div{ 
        background-color:chocolate; 

        div{ 
         background-color:brown; 
        } 
       } 
      } 
     } 
    } 
}