한 섹션의 어린이를위한 CSS 파일

Question

내 페이지에 많은 sections이 있습니다. 이들 각각은 sections이 유사한 요소를 가질 수 있습니다. 예를 들어 각 섹션에서 h1 요소가 될 수 있습니다.

나는이 CSS가 모두 하나의 섹션에만있을 수있는 CSS 파일을 추가하려고합니다. 예를 들어

나는 IDS는 내 페이지에 세 부분이 있습니다

:
• 섹션 1 - - 2 장 섹션 3

나는 3 CSS는 이름이 너무 파일이

• section1.css - section2.css - section3.css

모든 css 파일이 적절한 섹션을 참조하는 방법?

섹션 ID가있는 모든 CSS 파일에 추가 블록을 추가 할 수 있습니까?

Answer 1

고유 ID가있는 각 섹션에 대해 별도의 스타일을 사용하려면 ID를 선택기로 사용하십시오. 예를 들면 :
section1.css

#section1 h1{ color:red;} 
#section1 .someclass { color: blue} 

section2.css

#section2 h1 { color: green;} 
#section2 .someclass {color:yellow;} 

등등. 각 섹션에 대해 ID로 선택하는 별도의 스타일을 갖게됩니다. 가장 쉬운 방법이라고 생각합니다.

Answer 2

CSS 파일은 해당 요소를 참조하지 않습니다 (귀하의 경우 id). 실제로 요소를 대상으로하는 선택기입니다. 각 섹션의 각 하위에 대해 별도로 사용할 수 있습니다.

대신 id과 함께 상속을 사용하십시오.

는 예를 살펴 아래 니펫을 가지고 :

/* Section 1 */ 
 
#section1 { 
 
    background: #ff0; 
 
    padding: 10px 15px; 
 
} 
 

 
#section1 p { 
 
    background: #99d; 
 
} 
 

 
/* Section 2 */ 
 
#section2 { 
 
    background: #99d; 
 
    padding: 10px 15px; 
 
} 
 

 
#section2 p { 
 
    background: #ae9; 
 
} 
 

 
/* Section 3 */ 
 
#section3 { 
 
    background: #ae9; 
 
    padding: 10px 15px; 
 
} 
 

 
#section3 p { 
 
    background: #ff0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="section1"> 
 
    <strong>Section 1</strong> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p> 
 
</div> 
 

 
<div id="section2"> 
 
    <strong>Section 2</strong> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p> 
 
</div> 
 

 
<div id="section3"> 
 
    <strong>Section 3</strong> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quam dicta libero qui sapiente beatae sunt, aspernatur et reprehenderit natus dolor, sint aliquid iure magni quibusdam accusantium provident perspiciatis fugit.</p> 
 
</div>

희망이 도움이!