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

时间:2018-08-28 08:25:21

标签: css

假设我有三个页面(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这样的新类,但是还有更好的方法吗?

3 个答案:

答案 0 :(得分:4)

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

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

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

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

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

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

编辑:这是一个很好地解释它的链接。 https://css-tricks.com/the-difference-between-id-and-class/