Question

我的页面上有很多#{1,2,3}。这些sections中的每一个都可以具有相似的元素，例如，在每个部分中都可以是sections元素。

我想添加css文件，其中每个css只适用于一个部分。

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

section1 - section2 - section3

我有三个名字的css文件：

section1.css - section2.css - section3.css

如何做到每个css文件引用一个合适的部分？

也许我可以使用section 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继承。

查看下面的示例代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

一个部分的子项的CSS文件

2 个答案: