一個部分的兒童的CSS文件

我的頁面上有很多sections。這些sections中的每一個都可以具有相似的元素，例如在這些部分中的每一個可以是h1元素。一個部分的兒童的CSS文件

我想添加css文件，其中每個css將只用於一個部分。

例如，我有我的網頁上三個部分，其中ID是：

SECTION1 - 第2節 - SECTION3

我有三個CSS與名稱的文件太多：

section1.css - section2.css - section3.css

如何做到每一個CSS文件引用一個合適的部分？

也許我可以添加任何額外的塊到每個這些css文件與部分ID？

來源

2016-11-29 Przemysław Niedziela

*我想添加css文件，其中每一個css將只用於一個部分。* - 等等，爲什麼？你想通過爲每個部分分別創建CSS文件來解決什麼問題？ – BSMP

我不知道你爲什麼想這樣做，但是如果你想爲每個具有唯一ID的節設置不同的樣式，只需使用ID作爲選擇器。例如：
section1.css

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

section2.css

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

等。您將爲每個部分使用ID選擇不同的樣式。我認爲這是最簡單的方法

來源

2016-11-29 16:51:27

我正在做網站，用戶可以添加自己的部分和自己的風格。我希望用戶不必知道段的id，並在css編輯器中使用每個塊編寫該ID。 –

@ user3271955 *用戶可以添加自己的段和自己的樣式*這與您在問題中描述的問題不同。你應該問一個新的問題，並指出這是你想解決的問題。 – BSMP

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>

希望這有助於！

來源

2016-11-29 16:55:36

一個部分的兒童的CSS文件

回答

相關問題