Question

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

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

在css

中

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

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

Answer 1

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

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

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

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

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

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

Answer 2

按照NoobTW的建议放第二类是最好的选择。

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

Answer 3

您可以为第1页的班级添加一个ID。因此可能是：

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

由于ID应该是单个实例，而一个类应该被多次使用，因此使用ID会更整洁。