CSS档案为一个部分的儿童

Question

我的页面上有很多sections。这些sections中的每一个都可以具有相似的元素，例如，在每个部分中，每个部分都可以是h1元素。

我想添加CSS文件，这些CSS仅在一个部分中。

例如，我的页面上有三个部分，其中ID为：

• 第1节 - 第2节 - 第3节

我也有三个CSS文件，名称：

• 第1节 - css -ection2.css -e节。3.css

如何执行每个CSS文件是指合适的部分？

也许我可以在所有具有ID的CSS文件中添加任何其他块？

Answer 1

我不知道为什么要这样做，但是如果您想为每个具有唯一ID的部分的单独样式，只需将ID用作选择器即可。例如：
e节1.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>

希望这会有所帮助！