如何为特定页面以不同方式定位 div?

How to position a div differently for a specific page?

我网站的每个页面上都有 <div class="rightside">。它在每个页面上放置一个联系表单,然后在 850 像素宽的屏幕上(用于响应)它隐藏带有 display: none;

的联系表单
@media only screen and (max-width : 850px) {
.rightside {
    display: none;
} 
}

在“联系我们”页面上,我想让联系表格仅适用于此页面。我怎样才能在联系我们页面上进行更改,以便在联系我们时联系表仍可用于 850 以下的设备,但在其他页面上 display: none;

更新: 我希望在我的 css 中使用 .rightside 中的属性。我试过:

<div class="rightside" id="contactpage"> in contact page 

在 850 的媒体查询中

.rightside #contactpage  {
   float: left;
}

在你的 HTML 上,你可以添加一个额外的 class 到你想要在特定点后消失的所有右侧 div,然后只需使用 CSS select 或仅删除这些 div。更改所有响应式 div 上的 HTML 标记,这样您就有 <div class = "rightside responsive"> 而不是 <div class = "rightside>。这向称为响应的 div 添加了一个额外的 class,从这里您可以 select 具有此 class 的 div 使用 .rightside.responsive 而不是仅 .rightside 在您的媒体查询中。

更新

您最近更新的代码不起作用的原因是您在 #contactpage.rightside 之间有一个 space。通过在两个 select 之间没有 space,您正在 selecting 处于同一级别的元素,并且您的代码应该可以工作。

尝试在现有代码之后添加另一种 css 样式,如下所示:

<div class="rightside contact"></div>


@media only screen and (max-width : 850px) {
    .rightside {
        display: none;
    }
    .rightside.contact {
        display: block;
        float:right;
    } 
}