CSS-Datei für Kinder eines Abschnitts

Question

Ich habe viele sections auf meiner Seite. Jede dieser sections kann ähnliche Elemente haben, zum Beispiel in jedem dieser Abschnitte kann h1 Element sein.

Ich möchte CSS-Dateien hinzufügen, wo jeder dieser CSS nur für einen Abschnitt sein wird.

Zum Beispiel habe ich drei Abschnitte auf meiner Seite, wo ids sind:

• section1 - section2 - section3

Ich habe drei CSS-Dateien auch mit den Namen:

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

Wie geht das? Jede CSS-Datei bezieht sich auf einen passenden Abschnitt?

Kann ich möglicherweise jeden zusätzlichen css-Dateien mit Abschnitt-ID hinzufügen?

Answer 1

Ich weiß nicht, warum Sie das tun möchten, aber wenn Sie separate Stile für jeden Abschnitt mit eindeutiger ID haben möchten, verwenden Sie einfach die ID als Selektor. Zum Beispiel:
section1.css

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

section2.css

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

Und so weiter. Sie haben für jeden Abschnitt separate Stile, die nach ID ausgewählt werden. Ich denke, es ist der einfachste Weg

Answer 2

CSS-Dateien bezieht sich nicht auf seine Elemente (in Ihrem Fall id). Es ist der Selektor, der tatsächlich Elemente anvisiert. Sie können für jedes der untergeordneten Elemente in jedem Abschnitt separate Elemente verwenden.

Verwenden Sie stattdessen Vererbung mit jedem id.

Haben Sie einen Blick auf das Beispiel Snippet unten:

/* 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>

hoffe, das hilft!