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