在多个页面中使用相同的 CSS 类答案

【问题标题】：using same css class from multiple pages在多个页面中使用相同的 CSS 类
【发布时间】：2018-08-28 16:37:05
【问题描述】：

假设我有三个页面（ Page1,Page2,Page3 ），每个页面都有相同的元素

<div class="myStyle" >.....</div>

在css

.myStyle{...some style...}
.myStyle > a {...}
.myStyle > a:hover {...}

我想添加媒体查询@media all and (min-width: 800px) {...仅用于第1页并想在其中修改.myStyle。
我不想将此应用于 page2 和 page3 。
我可以创建像.myStyleForPage1 这样的新课程，但有没有更好的方法？？

【问题讨论】：

标签： css

【解决方案1】：

您可以为您的@media all and (min-width: 800px) {... 创建一个.myStyleForPage1 类

但您也可以创建另一个类，例如 myStyleMQ，并且

page1：<div class="myStyle myStyleMQ">...</div>

第2页：<div class="myStyle">...</div>

第三页：<div class="myStyle">...</div>

因为一个元素中可以有多个类。

【讨论】：

【解决方案2】：

按照 NoobTW 的建议开设第二节课是你最好的选择。

尽管作为替代方案（如果您无法轻松添加额外的类），您可以将要应用于 Page1 的 CSS 放入 Page1 中的样式标记中，或者在 Page1 中包含另一个具有页面特定样式的样式表.

【讨论】：

【解决方案3】：

您可以向页面 1 类添加一个 ID。所以它可能是：

    .mystyle#page1 {} / <div class="mystyle" id="page1"></div>

因为一个 ID 应该是一个单独的实例，而一个类应该被多次使用，使用一个 id 会更整洁。

【讨论】：