javascript - 避免 CSS 中的重复

Question

我对这个网站/编码很陌生，我有一个关于 CSS 的问题。如果这个问题出现在其他地方，我深表歉意。

假设您创建了一个 div(将其命名为 div1)并使用 CSS 设置了样式。如果您想将此 div 复制 10 次，但对每个 div 都进行非常小的更改，您能否将 div 保留为 .class，如果可以，我该如何对每个 div 进行较小的更改？

Answer 1

是的，您可以给它们一个类名，并以相同的方式为该类的每个元素设置样式。对于较小的更改，您可以使用 id属性(甚至内联 CSS)。

例如:

HTML:

<div class = "box" id = "first">
  ...
</div>
<div class = "box" id = "second">
  ...
</div>
<div class = "box" id = "third">
  ...
</div>

CSS:

.box {
    background-color: red;
    color: blue;
}

#first {
    color: yellow;
}

#second {
    color: green;
}

#third {
    color: white;
}

但是，请记住，最好使用描述布局的标签，而不是调用所有内容 <div>并给他们上课(即 <section>、<article>、<aside>、<footer>、<header>、<main>、<nav>)。