Css 通过稍微修改类而不复制并重命名该类来重新使用该类

好吧，我已经读了一段时间了，这里有很多优秀的人，这就是为什么我对问这个CSS问题感到有点尴尬和有点害怕的原因，我冒着被嘲笑的风险来增加我的知识，现在开始

我一直在试图把我的大脑围绕着一个概念，这个概念对大多数人来说可能是轻而易举的，但阅读CSS书籍和大量在线辅导仍然没有让我对这个问题有一个清晰的认识

当我创建一个网站作为一个设计时，显然有许多重复的样式，但当我重复使用与我设计的特定页面所需的样式不完全匹配的样式时，这是我最大的问题

例如，我创建了一个大致相同的“h1”、“h2”、“p”规则，如果我需要修改它，我只需创建一个类或使用一个span标记，当我必须为设计的特定部分修改这些标记时，我不知道这是否是处理它的最佳方式，但这就是我一直在做的事情

但更糟糕的是，我在我的主体div中为主要和次要内容创建了容器，对于我创建的每个页面，我基本上都是从上一个页面复制div（id或class）（我为其做了标记）只需更改名称，这样我就可以修改它，而不会弄乱复制它们的其他页面上的相同div或类

这看起来像是太多的CSS，但我不知道如何修改类或id来满足我在特定页面上的需要。这就是解释，这里是我的一些实际CSS，我把它复杂化了：

一个名为：产品与定价的页面--

产品与定价
…通用文本…

一个叫做：支持的页面--

支持
…通用文本..

一个叫做：联系的页面--

联系我们
…通用文本…

你看到我在这里干什么了吗

我正在为每个页面primaryContent div创建一个单独的规则，因为我担心如果我必须改变它的大小或填充，我会在其他页面上弄乱所有具有相同id或类的其他div，我尝试不这样做，我只是复制规则并毫不担心地更改它，因为我知道这不会影响其他div或规则，但是这简直太愚蠢了，因为我写了太多的CSS，而没有提高我的游戏水平，因为我被毫无意义的东西蒙蔽了

您可能还注意到，我没有更改（h1id=“introHeader”）或（p id=“introText”），因为我相信这里的人可以告诉我如何处理，而不必为每个页面创建新的“h1”规则或“p”规则，以防我想更改div的宽度、高度、填充、边距、浮动等

有谁能帮我结束我的盲目，让我的疯狂变成逻辑，这样我就可以一劳永逸地学习如何不用担心重复使用id和类，因为我知道我在做的事情有一个更简单的逻辑

我知道ID只能在每页和类中使用一次，但我现在做的是太多的css，必须有一个更简单的方法来编辑每页的样式，而不是复制规则并重命名，这样我就可以编辑填充、边距、文本对齐、浮动、宽度、高度等内容，不用担心它会在别的地方弄坏东西

这有意义吗？对不起，我的解释太冗长了，谢谢你花时间向我倾诉你的知识

按语义标记HTML，例如：
产品：

支持：

在CSS中根据需要进行一次性修改

#introHeader{/*通用样式*/}
正文#产品#介绍标题{/*页面特定调整*/}
body#support#introHeader{/*页面特定调整*/}

仅覆盖每页绝对必须覆盖的内容，将公共样式保留为从单个源继承

按语义标记HTML，例如：
产品：

支持：

在CSS中根据需要进行一次性修改

#introHeader{/*通用样式*/}
正文#产品#介绍标题{/*页面特定调整*/}
body#support#introHeader{/*页面特定调整*/}

---

仅在每页基础上覆盖您绝对必须覆盖的内容，将通用样式保留在单个源中。

首先，我建议不要使用ID来设置内容的样式。ID最好用于提供导航和脚本挂钩。如果您将ID用于此目的，并将类用于样式设置，那么您可以随心所欲地更改ID和类，而不用担心脚本或样式设置会停止工作。关注点分离。此外，您可以避免特定性问题，这通常是一个额外的好处

现在，我将努力加深对你们在这里想要实现的目标的理解。基本上，您有一个模块或一组标记，它们看起来总是一样的。然而，在某些页面上，您可能需要修改边距和填充（以及其他属性）

所以我会这样做

创建一个通用案例

添加附加类（借用OOCSS语法）扩展您的泛型

通用标记：

<div class="content">
     <h1 class="content-header">Content header</h1>
     <p class="content-text">...generic text...</p>   
     <img id="serversImg" alt="..."></img>      
</div>

---

首先，我建议不要使用ID来设置内容的样式。ID最好用于提供导航和脚本挂钩。如果您将ID用于此目的，并将类用于样式设置，那么您可以随心所欲地更改ID和类，而不用担心脚本或样式设置会停止工作。关注点分离。此外，您可以避免特定性问题，这始终是一个问题

    <div id="primaryContent_support">
             <h1 id="introHeader">Support</h1>
             <p id="introText">...generic text..</p> 
             <img id="supportImg" alt="..."></img>     

    </div><!---end primaryContent_support--->   

    <div id="primaryContent_contact">
             <h1 id="introHeader">Contact Us</h1>
             <p id="introText">...generic text...</p> 
             <img id="contactImg" alt="..."></img>     

    </div><!---end primaryContent_contact--->    

<div class="content">
     <h1 class="content-header">Content header</h1>
     <p class="content-text">...generic text...</p>   
     <img id="serversImg" alt="..."></img>      
</div>

<div id="primaryContent_contact" class="content content-contact">
     <h1 class="content-header">Contact Us</h1>
     <p class="content-text">...generic text...</p> 
     <img id="contactImg" alt="..."></img>     
</div>

.content {
  padding: 10px;
}

.content-header {
  font-size: 16px;
  font-weight: bold;
}

.content-text {
  font-size: 12px;
  font-weight: normal;
}

.content-contact .content-header {
  color: red;
  padding: 0 10px;
}

<div class="primaryContent" id="pp">
     <h1>Products & Pricing</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#pp--->

<div class="primaryContent" id="support">
     <h1>Support</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#support--->

<div class="primaryContent" id="contact">
     <h1>Support</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#contact--->

.primaryContent{
    ...rules that are the same for all divs goes here...
}
#pp{
    ...rules for first div goes here...
}
#support{
    ...rules for second div goes here...
}
#contact{
    ...rules for third div goes here...
}

.primaryContent h1{
    ...rulles for all primaryContent h1s goes here...
}